React v16 ServerSide Rendering
If you do SSR for your React Application using React v15, you need to use
renderToString to generate a markup to use it on browser. In addition to that, If you’d like to generate entirely HTML of a page with React, you need to use
renderToStaticMarkup and combine them like the following.
This is an example of SSR using React v15.
To do that, you need to generate HTML, added a checksum and some attributes, from App Component and embed it in Html Component by
server.js, you need to generate HTMLs with
As the result, the HTML generated by
renderToString and the ReactElement generated by
ReactDOM.render match, which means the DOM generated by SSR is reused on
In React v16, React doesn’t use any checksum to validate markups and has an explicit API called
ReactDOM.hydrate to reuse SSR markups on browser, which means you don’t need to match the entry point between server and browser. (If you still need to use
ReactDOM.render and want to reuse SSR markups, you have to match the entry point because
data-reactroot attribute for hydration)
As the result, you can write the above example using React v16 like the following, which is using
renderToNodeStream which is added in v16.
Great! You don’t need to generate the markup from your App Component to reuse it on browser anymore! You just use
renderToNodeStream and just pass the component as the children of the DOM element that is the target of
As a result, Your SSR code becomes very simple and efficient with React v16.