React - Server Side Rendering

- February 13, 2021

Photo by Viktor Jakovlev on Unsplash

Let's talk about React Server-side Rendering for specific use cases. When is it useful and when is it not? Will search engines become better at indexing Client-side React apps?

Problem with Client-Side React (CSR)

The problem with Client-Side React is that you receive an empty HTML skeleton from the server. Search engine bots must do more work to get the real content of your page. As a result, it's not ideal for Search Engine Optimization (SEO). React is rendered on the client to move away from the Server-Client architecture. In Client-side React, there is no server. The client does everything by himself, so it doesn't need to perform HTML requests for each step in the navigation. He does AJAX requests to get the data on the fly.

If we want to render React pages before it reaches the client, we have the choice between build-time rendering (Gatsby) or on-the-fly server-side rendering (NextJS). We can use hybrid solutions provided by NextJS as well.

Server-side rendering (SSR): Better SEO

SSR generates the HTML on the server so that search engine bots get it straight away. If it's a static site, you don't need SSR. But if it's a highly dynamic site like a forum, you cannot build a static version of a forum every time there is a new post. Yet you still want effective SEO.

Server-side rendering: Potential better security for API calls

Client is not able to access the backend anymore. It cannot interact with the database so it reduces the attack surface. All the API calls are now made on the server, in a secure environment.

Potential drawbacks

The question that remains is : do we need to request the server for every page? Are some pages cached on a CDN as static pages? Can the page gets hydrated with new data without a page reload?

Is it worth the work or will the search engine get better to load and index Client-Side React pages? Should it become the default stack? If yes why?