ReactJS server-side rendering vs client-side rendering

Question

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?

Jacquerie

Short answer, NO - you can decouple, send static html and completely change it in client render. Have added details in my answer. – Flintshire

to solidify your understanding, check out this blog post: kulkarniankita.com/react/react-server-client-components – Phidias

Answer 1

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.

Haem

So in case of "both" I need to write the same code twice" one for server rendering, and one to reproduce this DOM on client? right? – Jacquerie

You need to run the same code twice. Once on the server and once on the client. However, you need to write your components to take this into account - e.g. you shouldn't do any async data fetching in componentWillMount(), as it will run both the client and server. You'll also need a strategy for fetching data up front on the server and making it available for initial render on the client, to make sure you get the same output. – Impunity

You can also check whether the code being executed is on the server-side or client-side using typeof window == "undefined" and then fetch your data accordingly. – Haem

In the "Client Side" part of your answer you refer to "initial html rendered by the server". That sounds more like like "Both". Can the server serve static html for a truly client-side setup? – Tubuliflorous

@IanW Typically in this case the HTML returned by the server is very "bare bones", simply importing your JavaScript and styles and containing a <div> that React will write into. – Bolme

Answer 2

Image source: Walmart Labs Engineering Blog

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.

Yungyunick

Answer 3

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.

Baccivorous

Answer 4

Is it 2 separate ways to build the application, or can they be used together?

They can 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?

It's better to have the same layout being rendered to avoid reflow and repaint operations, less flicker / blinks, your page will be smoother. However, it's not a limitation. You could very well cache the SSR html (something Electrode does to cut down response time) / send a static html which gets overwritten by the CSR (client side render).

If you're just starting with SSR, I would recommend start simple, SSR can get very complex very quickly. To build html on the server means losing access to objects like window, document (you have these on the client), losing ability to incorporate async operations (out of the box), and generally lots of code edits to get your code SSR compatible (since you'll have to use webpack to pack your bundle.js). Things like CSS imports, require vs import suddenly start biting you (this is not the case in default React app without webpack).

The general pattern of SSR looks like this. An Express server serving requests:

const app = Express();
const port = 8092;

// This is fired every time the server side receives a request
app.use(handleRender);
function handleRender(req, res) {
    const fullUrl = req.protocol + '://' + req.get('host') + req.originalUrl;
    console.log('fullUrl: ', fullUrl);
    console.log('req.url: ', req.url);

    // Create a new Redux store instance
    const store = createStore(reducerFn);

    const urlToRender = req.url;
    // Render the component to a string
    const html = renderToString(
        <Provider store={store}>
            <StaticRouter location={urlToRender} context={{}}>
                {routes}
            </StaticRouter>
        </Provider>
    );
    const helmet = Helmet.renderStatic();

    // Grab the initial state from our Redux store
    const preloadedState = store.getState();

    // Send the rendered page back to the client
    res.send(renderFullPage(helmet, html, preloadedState));
}

My suggestion to folks starting out with SSR would be to serve out static html. You can get the static html by running the CSR SPA app:

document.getElementById('root').innerHTML

Don't forget, the only reasons to use SSR should be:

1. SEO
2. Faster loads (I would discount this)

Hack : https://medium.com/@gagan_goku/react-and-server-side-rendering-ssr-444d8c48abfc

Flintshire