What are the performance differences between CSR and SSR? It depends but also, the type of rendering can influence many processes in the mobile app. That’s why we would like to compare these two types of techniques for rendering applications on the example of Next.js and Create React App. Let’s see what are the results and which rendering method will be suitable for different kinds of projects.
CSR and SSR quick overview
CSR
Client Side Rendering – rendering method that relies on executing JS on the client’s side (browser) via JavaScript framework. The client will first request the source code which will have a little amount of indexable HTML in it. Then a second request will be made for the .js files that contain all of the HTML in JavaScript as strings.
SSR
Server Side Rendering – rendering method where all of your page’s resources are kept on the server. When the page is requested, the HTML is delivered to the browser, rendered and JS and CSS downloaded.
| You may also be interested in: Svelte – future for Frontend Development Do we feel comfortable in Nest.js? Top frontend technologies you need to know |
CSR and SSR frameworks
Next.js
Next.js is a React framework that allows you to create a React application with server-side rendering. According to nextjs.org:
“With Next.js, server rendering React applications has never been easier, no matter where your data is coming from.”
The framework uses such libraries as React, Webpack and Babel.
Create React App
According to documentation:
“Create React App is an officially supported way to create single-page React applications. It offers a modern build setup with no configuration.”
It is a tool built by developers at Facebook that gives you a massive head start when building React applications.
SSR vs. CSR
To compare these two techniques, first I used Next.js to create a React application that supports server-side rendering. In the second case scenario, with Create React App I could use React for client-side rendering.
Surely, there are also other frameworks when it comes to either choice. I have chosen two of the most popular to make that comparison.
The comparison
The performance was tested on a simple example with one API request and JavaScript dependency – Moment.js, using the Chrome browser. Here are the Lighthouse results for a full-page load on each application.
Next.js (SSR)
Create React App (CSR)
One of the more notable differences is the First Meaningful Paint. That means the time at which the user feels that the primary content of the page is visible. For the CRA it is 3,5 seconds, Next.js 1,3 seconds.
Also when it comes to the Speed Index, which shows how quickly the contents of a page are visibly populated, CRA is delayed 5,5 seconds, compared to Next.js (3 seconds).
In both examples, with CRA the image and non-image content cannot be displayed and the application becomes interactive when the JavaScript files are downloaded. That’s why these results differ so much.
If you are interested in a more detailed description of these metrics, read the Lighthouse Scoring Guide.
SSR – pros
- Thanks to better SEO, search engines can crawl the site higher
- The initial page load is faster
- Useful for static sites
CSR – pros
- Rich site interactions
- Website rendering is faster after the initial load
- Great selection of JavaScript libraries
SSR – cons
- Frequent server requests
- Full page content reloads
- Overall page rendering is slower
CSR – cons
- If not implemented correctly, low SEO score
- The initial load may require more time
- Requires external libraries, in most cases
SSR vs. CSR – conclusions
For a web application with React, better SEO score, easier social media optimization and faster render, you should think about SSR and framework like Next.js.
If you are building a SPA (single page application), and you don’t want to configure everything on the server’s side like i18n, router e.t.c. you should use Create React Application.
Of course, further recommendations are going to be based on the type of project and many other factors. Contact us to get detailed information about mobile or web development. We will gladly cooperate with you to accomplish your business goals!
