React - Server Side Rendering (SSR) - DOM Server

server side rendering (SSR) in React

The server side rendering (SSR) functionality in react can output two types of page:

• React - Server-rendered markup (renderToString / hydrate) (that will becomes dynamic after script loading)
• React - Static Markup (renderToStaticMarkup) (that stay static)

• 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…)

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

• 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