Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Server Side React for WordPress by Muhammad Muhsin @ The JavaScript for WordPress Conference (#JSforWPConf) - 12 Jul 2019

229 views

Published on

rtCamper Muhammad Muhsin shares his take on Server Side React for WordPress.
Muhammad talks about the advantages of React and its ability to render content on the server-side, which helps performance and SEO for search engines.
He also introduces Next.js (a server-side React framework) and how to build a web app with Next.js on the front-end and WordPress at the back end.

Published in: Engineering
  • Be the first to comment

  • Be the first to like this

Server Side React for WordPress by Muhammad Muhsin @ The JavaScript for WordPress Conference (#JSforWPConf) - 12 Jul 2019

  1. 1. Server Side React for WordPress @muhsinlk
  2. 2. Muhammad Muhsin
  3. 3. Server Side React for WordPress
  4. 4. Server Side PHP? ASP.NET? Java?
  5. 5. Server Side Rendering (SSR) ● Initial render in server ● Subsequent renders in client side ● So, render React on server & client
  6. 6. Why do SSR? ● Performance ● SEO ● Social Sharing
  7. 7. How to SSR in React? ● Node.js ● Express ● ReactDOMServer.renderToString
  8. 8. Own implementation ● Routing ● Code splitting ● Webpack, Babel, etc. ● Deployment ● And more... ��
  9. 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
  10. 10. Now, what framework?
  11. 11. Next.js A lightweight framework for static and server-rendered React applications.
  12. 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. 13. Who uses Next.js
  14. 14. Headless WordPress
  15. 15. Headless WP ● WP as a mobile backend ● Helps to build Single Page Apps ● Keep frontend separate from backend
  16. 16. 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
  17. 17. #wp-decoupled
  18. 18. WP Decoupled features ● WPGraphQL at the backend ● Offline support ● Products from WooCommerce ● Cart/Checkout ● Serverless with `now` ● Server/client side rendered React
  19. 19. Architecture
  20. 20. Going serverless?
  21. 21. Serverless No server? No There is a server, but we don’t maintain it.
  22. 22. 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
  23. 23. Getting started ● `now init` ● Next.js ● getInitialProps for data fetching ● Next Link
  24. 24. Demo
  25. 25. WP Decoupled Team ● @imranhsayed ● @muhsinlk ● @divyarajmasani ● @sayed_taqui
  26. 26. Links Demo Link GitHub Repo Learn Next Zeit Now WPGraphQL WPGraphQL WooCommerce Article on SSR React
  27. 27. We are hiring! 🤗 rt.camp/join
  28. 28. Thank You! 🙏 muhammad.muhsin@rtcamp.com@muhsinlk
  29. 29. Credits - Image Sources ● Use a framework ● Headless WordPress

×