luke.dewitt

$ cd ~/talks/ssr-react-with-php

2018-06-26REDspace Tech Share

React Server-Side Rendering with PHP⁠

Server-side rendering React from a PHP server, by embedding Google's V8 engine with V8Js. I don't know why either.

$ open slides

  1. REACT SERVER SIDE RENDERING WITH PHP I DON’T KNOW WHY EITHER
  2. REACT ▸Enough said…
  3. SSR ▸Server side rendering ▸As long as I can remember, people have been in love with the idea of rendering React Server Side ▸Some obvious benefits with regards to speed, FOUC, UX
  4. SSR REACT - HOW? ▸Using the React DOM module
  5. SSR REACT - HOW? ▸Using the React DOM module ▸… kind of…
  6. REACT DOM SERVER ▸Included in the React DOM module ▸import { ReactDOMServer } from “react-dom/server” ▸Use this module in NodeJS to render React Content on the server
  7. REACT DOM SERVER ▸renderToString(elem) ▸Render a React element to its initial HTML. ▸Links into your React app when JS is loaded. ▸renderToStaticMarkup(elem) ▸Similar to above, won’t hook into React. ▸renderToNodeStream(elem) ▸Returns a Readable stream that outputs an HTML string. ▸The stream returned from this method will return a byte stream encoded in utf-8.
  8. POOR EXAMPLE
  9. SSR REACT ▸So now we have an idea…
  10. SSR REACT ▸So now we have an idea… ▸… and I had an idea…
  11. PHP ▸More than enough said…
  12. SSR REACT ▸I remember reading that it was possible… ▸But how?
  13. V8JS ▸V8 JavaScript engine for PHP ▸Embeds Google V8 Engine ▸Use PECL to install ▸Enable in your php.ini file
  14. SO… ▸It kind of writes itself from here…
  15. SSR REACT ▸Use V8 Engine to render your React app on the PHP server ▸Spit it out to the browser
  16. I’M OUT
  17. NAH
  18. CODE - SIMPLE REACT APP
  19. CODE: SIMPLE REACT APP
  20. CODE - GETTING REACT READY ▸Need to expose React (and associated pieces) globally ▸“Hydrate” your React app ▸Be wary of your plugins ▸“BrowserRouter” doesn’t work server side, make sure you’re aware of these nuances
  21. CODE: RENDERING SERVER SIDE
  22. THOUGHTS ▸A lot of work for… what? ▸SEO Concerns ▸componentDidMount XHR ▸Maybe use for headers, navs, page structure and let the requests happen? ▸Maybe for more “dynamic” content ▸Storing state as a whole
  23. THANKS, Y’ALL!!
1 / 23
download pdf ↓

$ cat notes.md

An internal tech share at REDspace. The title slide’s subtitle said it best: I don’t know why either.

React’s react-dom/server module renders components to HTML, but it expects to run in Node. I’d read that you could do it from PHP, so I tried.

How it works

  • V8Js embeds Google’s V8 JavaScript engine in PHP. Install it with PECL and enable it in php.ini.
  • PHP runs your React bundle through V8, calls renderToString, and sends the HTML to the browser.
  • In the browser, React hydrates that markup and takes over.

Getting React ready

  • Expose React (and anything else the render needs) globally, so V8 can reach it.
  • Watch your plugins: not everything runs outside a browser.
  • BrowserRouter doesn’t work on the server, so know where those edges are.

Was it worth it?

A lot of work for… what? Data fetched in componentDidMount still happens in the browser, so the SEO win is limited. It might make sense for the page structure (headers, nav, layout) while the requests happen client-side, for more dynamic content, or for serializing the app’s state as a whole.

visitor@whatadewitt: ~