React - Server Side Rendering (SSR) - DOM Server

About

This page is about server side rendering (SSR) in React as opposed to the browser rendering.

The server side rendering (SSR) functionality in React can output two types of pages:

• React - Server-rendered markup (renderToString / hydrate) (that will become dynamic after script loading)
• How to render React on the Server (SSR) in Static Markup (renderToStaticMarkup)? (that stays static)

Pro

• An HTML page is present regardless of whether or not the React JavaScript bundle successfully downloads.
• Enables SEO (Google, DuckDuckGo…): increases the likelihood that each route of the application will be picked up by search engines.
• Enables Social media optimization (SMO) (Twitter, Facebook…)

External

Php rendering from instance..

• https://medium.com/@dougmacknz/how-to-integrate-react-into-an-existing-multi-page-app-b727c2483ec4
• https://github.com/DeloitteDigitalAPAC/react-habitat
• https://medium.com/@baphemot/understanding-reactjs-data-hydration-initialization-bacbb790c7cb

Passing data to the application at run time is known as:

• initialization,
• bootstrapping
• or state hydration

Documentation / Reference

• Example: https://github.com/cssinjs/examples/tree/gh-pages/react-ssr
• https://redux.js.org/usage/server-rendering with redux and ReactDOMServer.renderToString()
• https://reactrouter.com/docs/en/v6/guides/ssr and https://reactrouter.com/docs/en/v6/examples/ssr