Is Client-Side Rendering the Right Choice?

I am a front-end developer, and I am often met with the words “uh, then you love SPAs” with a hint to CSR and my answer is mostly “well no, but yes”. It really depends on the goal for the application. In this post I will explain my ambiguous answer.

When you use Client Side Rendering for your application, then only the HTML container will be rendered by the server. Everything else will be handled by the client, which is the browser. All the logic for the application will be handled by JavaScript. This also means routing and data fetching.

The HTML of an application could look like the example below. All the content will be handled by JavaScript. This will of course increase the FCP and TTI for the website. The entire application is loaded on the first request and the code runs in the browser to change the view and data. This could definitely have a negative effect for the user. But on the other hand, as everything is loaded, the routing between the pages is faster and therefore making the experience smoother.

<div id="root"></div>

Another negative impact of working with client side rendered websites is SEO. If your website is static rendered or server side rendered, then it is pretty obvious for the web crawler to read the page. If the web crawler is only getting a single <div> and some JavaScript, then it is not as obvious.

As I mentioned, the entire website is being loaded on the first request. It is probably a good idea to have a budget on the JavaScript for your website. You could also consider preloading and lazy loading.

What is the goal for the website? Are you making a blog? Are you making a webshop? Are you making a highly interactive website? We have multiple ways of rendering websites today with a variety of tools and services. Is static rendering the right choice? Is server side rendering the right choice? Is client side rendering the right choice?

All these questions are why I am really interested in this topic.