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
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 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.
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).
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
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!