0

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".

Vishnu Shekhawat
  • 1,245
  • 1
  • 10
  • 20
  • 2
    It means that you can pre-render the react powered page on the server and send the content within the http response. This generally means faster page load times for users and is considered more SEO friendly. – ctrlplusb Sep 13 '16 at 09:17
  • 1
    I have an example boilerplate app for this, [`react-universally`](https://github.com/ctrlplusb/react-universally) – ctrlplusb Sep 13 '16 at 09:18
  • @ctrlplusb , So we will not be able to see the "Components and other React Features" on client side code. So in that case what should be done to debug the app on browser – Vishnu Shekhawat Sep 13 '16 at 09:21
  • You will still be able to see the components etc using the standard react dev tools. It will behave like a normal react app in every other way. It just means that react will have to do less work on the first page load. Try make a clone of my boilerplate and fire it up. – ctrlplusb Sep 13 '16 at 09:22
  • @ctrlplusb . I am bit confused .Since it is already prerender i.e. converted to JS code (right) using webpack . So why does it shows the react component in browser. I mean is it a copy created for debugging purpose by our server or something else. – Vishnu Shekhawat Sep 13 '16 at 09:25
  • Maybe look at something like https://github.com/TrueCar/gluestick lots of other options available but it sets up a react project with server side rendering included – Andy Stannard Sep 13 '16 at 11:24

1 Answers1

4

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

Scarysize
  • 4,131
  • 25
  • 37