1. Server Side React for WordPress
@muhsinlk

2. Muhammad Muhsin

3. Server Side React
for
WordPress

4. Server Side
PHP?
ASP.NET?
Java?

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

10. Now, what framework?

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

14. Headless WordPress

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

21. Going serverless?

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

29. Thank You! 🙏
muhammad.muhsin@rtcamp.com@muhsinlk

30. Credits - Image Sources
● Use a framework
● Headless WordPress