Home » Reactjs » ReactJS server-side rendering vs client-side rendering

ReactJS server-side rendering vs client-side rendering

Posted by: admin November 30, 2017 Leave a comment

Questions:

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?

Answers:

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 include 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 tempting 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.

Questions:
Answers:

Image source: Walmart Labs Engineering Blog

SSR

CSR

NB: SSR (Server Side Rendering), CSR (Client Side Rendering).

The main difference being that with SSR, the servers response to the clients browser, includes the HTML of the page to be rendered.
It is also important to note that although, with SSR, the page renders quicker. The page will not be ready for user interaction until JS files have been downloaded and the browser has executed React.

One downside is that the SSR TTFB (Time to First Byte) can be slightly longer. Understandably so, because the server takes some time creating the HTML document, which in turn increases the servers response size.

Questions:
Answers:

I was actually wondering the same researching quite a bit and while the answer you are looking for was given in the comments but I feel it should be more prominent hence I’m writing this post (which I will update once I can come up with a better way as I find the solution architecturally at least questionable).

You would need to write your components with both ways in mind thus basically putting if switches everywhere to determine whether you are on the client or the server and then do either as DB query (or whatever appropriate on the server) or a REST call (on the client). Then you would have to write endpoints which generate your data and expose it to the client and there you go.

Again, happy to learn about a cleaner solution.