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
@muhsinlk
Muhammad Muhsin
Server Side React
for
WordPress
Server Side
PHP?
ASP.NET?
Java?
Server Side Rendering (SSR)
● Initial render in server
● Subsequent renders in client side
● So, render React on server & ...
Why do SSR?
● Performance
● SEO
● Social Sharing
How to SSR in React?
● Node.js
● Express
● ReactDOMServer.renderToString
Own implementation
● Routing
● Code splitting
● Webpack, Babel, etc.
● Deployment
● And more...
��
Use a framework?
● Easy to get started
● Hard problems already solved
● No need to reinvent the wheel (Webpack etc.)
● Foc...
Now, what framework?
Next.js
A lightweight framework for static and
server-rendered React applications.
Next.js overview
● Automatic code splitting (and Prefetching)
● Every React component inside of ./pages is a route
● Serve...
Who uses Next.js
Headless WordPress
Headless WP
● WP as a mobile backend
● Helps to build Single Page Apps
● Keep frontend separate from backend
WP REST API WPGraphQL
● Part of WP core Part of a plugin
● Multiple endpoints
● Multiple fetch requests
● Unwanted fields
●...
#wp-decoupled
WP Decoupled features
● WPGraphQL at the backend
● Offline support
● Products from WooCommerce
● Cart/Checkout
● Serverless...
Architecture
Going serverless?
Serverless
No server?
No
There is a server, but we don’t maintain it.
Serverless with `now`
● Has support for local development with `now dev`
● A serverless platform by Zeit - the company
beh...
Getting started
● `now init`
● Next.js
● getInitialProps for data fetching
● Next Link
Demo
WP Decoupled Team
● @imranhsayed
● @muhsinlk
● @divyarajmasani
● @sayed_taqui
Links
Demo Link
GitHub Repo
Learn Next
Zeit Now
WPGraphQL
WPGraphQL WooCommerce
Article on SSR React
We are hiring! 🤗
rt.camp/join
Thank You! 🙏
muhammad.muhsin@rtcamp.com@muhsinlk
Credits - Image Sources
● Use a framework
● Headless WordPress
Server Side React for WordPress by Muhammad Muhsin @ The JavaScript for WordPress Conference (#JSforWPConf) - 12 Jul 2019
Upcoming SlideShare
Loading in …5
×

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

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.

Related Books

Free with a 30 day trial from Scribd

See all
  • 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

×