React – Server Side Rendering (SSR)

What is a Universal Application?

A Universal application is an application that can run both on the server- and the client-side with the same code.
React gives us a simple API to render our components on the server and transparently applying all the logic needed to make the page interactive (for example, event handlers) on the browser.

Why should we implement SSR?

SEO

For years, we used to write two applications: an SSR one for the crawlers and another one to be used on the client side by the users.
We used to do that because SSR applications could not give us the level of interactivity users expect, while client-side applications did not get indexed by search engines.
Maintaining and supporting two applications is difficult, and makes the code base less flexible and less prone to changes.
Luckily with React, we can render our components on the server side and serve the content of our applications to the crawlers in such a way that it is easy for them to understand and index the content.

A common code base

The ability to reuse the code on both sides makes collaboration easier, and the teams speak a common language, which helps with making faster decisions and changes.

Better performance

If we render our website on the server-side instead and the users start seeing some of the content as soon as they hit the page, they are more likely to stay, even if they have to wait the same amount of time before doing anything for real, because the client-side bundle has to be loaded regardless of the SSR.
This perceived performance is something we can greatly improve using server-side rendering because we can output our components on the server and return some information to the users straightaway.

How complex is the Universal application?

Rendering components it is not the only task that needs to be done to create server-side rendered applications.
We have to set up and maintain a server with its routes and its logic, manage the server data flow, and so on. Potentially, we want to cache the content to serve the pages faster and carry out many other tasks that are required to maintain a fully functional Universal application.
For this reason, my suggestion is to build the client-side version first, and only when the web application is fully working on the server should you think about improving the experience by enabling SSR.

When should you consider using SSR?

SSR should be enabled only when strictly needed. For example, if you need SEO or if you need to customize the social sharing information, you should start thinking about it.
If you realize that your application takes a lot of time to load fully and you have already done all the optimization (see the following chapter for more about this topic), you can consider using serverside rendering to offer a better experience to your users and improve the perceived speed.