reactjs - React can be used on server side rendering. What does that mean?

Question

I am new to React and Redux . Although i know that React is just a view layer . But i saw a term "React can be used on server side rendering". What does this mean and how it works behind the scene with nodejs.Can anyone help me in getting clear the fact that "What is server side render in react".

Answer 1

The react-dom package includes a server module. This module allows you render your react application to a simple HTML string with reactDOMServer.renderTostring(). Basically a snapshot of your view for a given set of props:

https://facebook.github.io/react/docs/top-level-api.html#reactdomserver.rendertostring

Additionally this functions calculates a unique hash from the string it generated and appends it to the html. On the client side react can "pick up" the server generated HTML and use it as its "first render".

Though the client side first render and the server render need to produce the exact same output for react to pick it up on the client side. React can check this via the generated hash: The client side react will also generate a html string (without modifying the actual DOM, I think this is done only on the virtual DOM). Now it can also calculate a hash from its virtual DOM and compare it with the server rendered one. If they match, no rendering needs be done. If they don't, the client side react will throw away the server generated DOM and replace it with its version (and print out an error/warning).

In combination with redux this means in addition to rendering the HTML you need to pass down the state of your store (store.getState()) to the client. The client can then use this serialized state as an initial state when creating its instance of the redux store. This will lead to both renders (client + server) to match up.

If you don't need the client side to do anything and just want to create static markup on the server side, react-dom offers a renderToStaticMarkup() function:

https://facebook.github.io/react/docs/top-level-api.html#reactdomserver.rendertostaticmarkup