Not in a mood for reading? Worry not!
Here’s the video version!
Server-Side Rendering (SSR) vs Client-Side Rendering (CSR)
If you want to build a React app, you can use two tools to start: Next.js and Create-React-App.
Next.js is becoming more and more popular, as it’s a framework that enables you to use both Server-Side Rendering (SSR) with the option of supporting Static Site Generation (SSG).
On the other hand, Create-React-App is a Client-Side Rendering tool.
Let’s have a closer look at both of them and try to compare how those two different rendering options can impact your app performance.
Create React App (CRA)
If you are just starting out with React, Create React App is a great way to learn it. CRA will also give you a head start if you want to use React to build a single-page application (SPA).
Thanks to the development environment created by Create React App:
- You will have a great DX (developer experience)
- Your app is optimized for production usage
You’ll need to have Node ≥ 8.10 and npm ≥ 5.6 on your machine.
Because Create React App is just responsible for creating a front-end build, you can use it with a back-end of your choice like Node. You should also know that CRA uses Babel and Webpack under the hood but don’t worry, no knowledge of them is required.
In other words, CRA is a tool that saves you from the time-consuming setup and configuration of the development environment. All you need to do is run one command which will set up the tools needed for React project to start. So instead of wasting time on configuration, you can focus on building an app right away.
However, it won’t be enough to build performant production-ready apps. There are more things to take into consideration like SEO or increasing performance. For the first one, you might need server-side rendering, and for the latter code-splitting.
Advantages of using Create-React-App
It gives you freedom.
What almost each React.js development company brings out as the main advantage is that there’s no more need for using a particular library – Create React App gives you the possibility to choose whatever routing library you want. Also, if you want to use, let’s say, TypeScript, it’s possible thanks to templates.
Support for rendering on the client side.
Because of client-side rendering, deployment becomes easy because such apps are easier to work with. What’s great is that you can use any hosting, i.e. Amazon S3.
Disadvantages of Create-React-App
It’s not easy to customise.
Customisation means additional effort because there is no built-in way to do that. If you are thinking about modifying the configuration of Webpack, you need a third-party tool like craco or eject. However, there is a cost to such a solution – at the moment of the ejection, you lose future support.
If you want something out-of-the-box, something that CRA doesn’t support by default, well, it gets messy. The lack of necessity to configure Babel and Webpack is a reason that’s easy to get started, but on the other hand, developers don’t know how to use these tools. Therefore, it complicates customization.
It doesn’t support SEO
Applications that are being rendered on the client side – including those built with Create React App – are bad for SEO so it’s not a great solution for the e-commerce industry or marketing goals. However, it also depends strongly on the other tools of your choice.
NOT SURE WHICH ONE TO CHOOSE?
Next.js is an open-source framework based on Node.js and Babel built by Vercel. It uses the benefits of React to help developers build single-page applications. Contrary to Create React App, it supports server-side rendering.
- Server-Side Rendering (SSR)
- Static exporting (SSG)
- Automatic build size optimization
- Faster development compilation
All these features help you with building a highly-performance and production-ready app.
There are two more worth-mentioning things – Next.js offers great documentation and is gaining popularity within the programming world.
However, even those things don’t make Next.js a one-fits-all solution.
Sure, server-side rendering becomes much easier thanks to that but it also causes some troubles. Every server-rendered route needs a serverless function and because the free limit of such functions is 12, you may need to pay for hosting if this amount exceeds the number of 12.
On the contrary, if you are using Create React App, you can be sure that you won’t pay for hosting on platforms like Vercel, Netlify or Render.
Advantages of using Next.js
It is blazingly fast.
Applications created with Next.js are blazingly fast because of static-site generation and server-side rendering. They are performant by default because of many performance-optimising features like Image Optimisation introduced together with Next 10.
Deployment is easy.
One of the goals of Vercel, a company that created Next.js, was to make the deployment of React applications as easy as possible. And they achieved it – you are just a few clicks away from getting deployment ready.
Possibility to use API Routes.
If you want to connect your application with third-party APIs, usually you will need your own API and Next.js makes it easy to create. In short, Next.js offers API routes that will do the job.
Customisation is easy.
While customisation is hard with CRA, Next.js makes it easier by giving the possibility to add Webpack loaders or Babel plugins.
Disadvantages of using Next.js
Since Next.js is limited to using only its file-based router, you can’t modify the way it deals with routes. Going further, you need Node.js server to use dynamic routes.
Read more about the pros and cons of Next.JS
When to use Next.js?
To build a landing page.
Next.js is loved by marketers who gladly use it to create landing pages or other marketing-focused pages.
When SEO matters.
If you want to build or currently have an online store, you must be aware that SEO matters and can give you a competitive advantage. And thanks to its speed, server-side rendering and special features, Next.js is the first choice for many when it comes to getting more organic traffic.
To build marketing websites.
Because our application will be rendered on the server, load times can improve significantly. Especially in those cases where visitors use slower devices.
To build a eCommerce webshop.
A few weeks ago Next JS, released a mighty eCommerce starter kit that allows you to build high-performance, user and Google-friendly webshops.
When to use Create-React-App?
To build a gated application.
Think about your future application. If it will be available only for those who are authenticated, server-side rendering is not that necessary. Apps that are using client-side rendering will be not only easier to host but also cheaper.
To build web applications.
If you want to build an application, it will be used mainly by returning visitors. In such a case, server-side rendering isn’t a must because we can use caching to achieve good load times with less effort.
Comparison of Static Site Generators
If you want to choose Next.js because of its Static Site Generation support, we also recommend you to have a look at a different comparison: Next.js vs Gatsby.js.