Server Side React for WordPress by Muhammad Muhsin @ The JavaScript for WordPress Conference (#JSforWPConf) - 12 Jul 2019
0 likes3,162 views
The document outlines the use of server-side rendering (SSR) with React for WordPress, emphasizing its benefits for performance, SEO, and social sharing. It introduces Next.js as a lightweight framework for building static and server-rendered applications, highlighting features such as automatic code splitting and easy data fetching. Additionally, it discusses the concept of headless WordPress and serverless architecture using the `now` platform by Zeit.
Server Side React for WordPress by Muhammad Muhsin @ The JavaScript for WordPress Conference (#JSforWPConf) - 12 Jul 2019
- 1. Server Side React for WordPress @muhsinlk
- 5. Server Side Rendering (SSR) ● Initial render in server ● Subsequent renders in client side ● So, render React on server & client
- 6. Why do SSR? ● Performance ● SEO ● Social Sharing
- 7. How to SSR in React? ● Node.js ● Express ● ReactDOMServer.renderToString
- 8. Own implementation ● Routing ● Code splitting ● Webpack, Babel, etc. ● Deployment ● And more... ��
- 9. Use a framework? ● Easy to get started ● Hard problems already solved ● No need to reinvent the wheel (Webpack etc.) ● Focus on solving your startup’s problem ● Enjoy an optimized config for free
- 11. Next.js A lightweight framework for static and server-rendered React applications.
- 12. Next.js overview ● Automatic code splitting (and Prefetching) ● Every React component inside of ./pages is a route ● Server side rendering by default ● Easy data fetching ● Webpack, Babel ● Micro Frontends
- 13. Who uses Next.js
- 16. Headless WP ● WP as a mobile backend ● Helps to build Single Page Apps ● Keep frontend separate from backend
- 17. WP REST API WPGraphQL ● Part of WP core Part of a plugin ● Multiple endpoints ● Multiple fetch requests ● Unwanted fields ● Slow Single endpoint Single fetch Exactly what you need Fast
- 18. #wp-decoupled
- 19. WP Decoupled features ● WPGraphQL at the backend ● Offline support ● Products from WooCommerce ● Cart/Checkout ● Serverless with `now` ● Server/client side rendered React
- 20. Architecture
- 22. Serverless No server? No There is a server, but we don’t maintain it.
- 23. Serverless with `now` ● Has support for local development with `now dev` ● A serverless platform by Zeit - the company behind Next.js ● Push to live with one command - `now` ● Next.js 8 has serverless support ● Every page in Next.js becomes a serverless function
- 24. Getting started ● `now init` ● Next.js ● getInitialProps for data fetching ● Next Link
- 25. Demo
- 26. WP Decoupled Team ● @imranhsayed ● @muhsinlk ● @divyarajmasani ● @sayed_taqui
- 27. Links Demo Link GitHub Repo Learn Next Zeit Now WPGraphQL WPGraphQL WooCommerce Article on SSR React
- 28. We are hiring! 🤗 rt.camp/join
- 30. Credits - Image Sources ● Use a framework ● Headless WordPress