ReactJS server-side rendering vs client-side rendering

javascript node.js client-server reactjs
Simcha picture Simcha · Dec 4, 2014 · Viewed 52.5k times · Source

I just have began to study ReactJS and found that it gives you 2 ways to render pages: server-side and client-side. But, I can't understand how to use it together. Is it 2 separate ways to build the application, or can they be used together?

If we can use it together, how to do it - do we need to duplicate the same elements on the server side and client side? Or, can we just build the static parts of our application on the server, and the dynamic parts on the client side, without any connection to the server side that was already pre-rendered?

Answer

Gautham Badhrinathan picture Gautham Badhrinathan · Dec 4, 2014

For a given website / web-application, you can use react either client-side, server-side or both.

Client-Side

Over here, you are completely running ReactJS on the browser. This is the simplest setup and includes most examples (including the ones on http://reactjs.org). The initial HTML rendered by the server is a placeholder and the entire UI is rendered in the browser once all your scripts load.

Server-Side

Think of ReactJS as a server-side templating engine here (like jade, handlebars, etc...). The HTML rendered by the server contains the UI as it should be and you do not wait for any scripts to load. Your page can be indexed by a search engine (if one does not execute any javascript).

Since the UI is rendered on the server, none of your event handlers would work and there's no interactivity (you have a static page).

Both

Here, the initial render is on the server. Hence, the HTML received by the browser has the UI as it should be. Once the scripts are loaded, the virtual DOM is re-rendered once again to set up your components' event handlers.

Over here, you need to make sure that you re-render the exact same virtual DOM (root ReactJS component) with the same props that you used to render on the server. Otherwise, ReactJS will complain that the server-side and client-side virtual DOMs don't match.

Since ReactJS diffs the virtual DOMs between re-renders, the real DOM is not mutated. Only the event handlers are bound to the real DOM elements.

Related questions

How do I completely uninstall Node.js, and reinstall from beginning (Mac OS X)

My version of node is always v0.6.1-pre even after I install brew node and NVM install v0.6.19. My node version is: node -v v0.6.1-pre NVM says this (after I install a version of node for the first time …

Read More
Writing files in Node.js

I've been trying to find a way to write to a file when using Node.js, but with no success. How can I do that?

Read More
map function for objects (instead of arrays)

I have an object: myObject = { 'a': 1, 'b': 2, 'c': 3 } I am looking for a native method, similar to Array.prototype.map that would be used as follows: newObject = myObject.map(function (value, label) { return value * value; }); // newObject is now { 'a': 1, 'b': 4, …

Read More