Nowadays the most popular solutions based on React technology are create-react-app, Next.js and Gatsby.js. What, when and where to use them? What are the differences? Let’s make a great comparison of the three giants in the frontend world, but first a few words about each of them.
create-react-app – Probably the most popular solution for beginners in React’s world. It’s a kind of tool which allows you to start developing a React application without configuration.
Gatsby.js – It’s a static site generator. Gatsby allows you to create very fast, efficient apps and websites. Additionally has a lot of useful plugins and integration with GraphQL.
Next.js – It’s a React framework which combines approaches: server side rendering and generating static websites. It requires no configuration which is a big advantage for beginners. Image optimization, internationalization of application – these are just a few features worth paying attention to.
Now we will compare four, key features in selecting appropriate React technology: performance, maintenance, SEO, frequency of modifying data.
Performance
- create-react-app
It’s CSR (ang. client-side rendering) library, which means that the browser is responsible for rendering entire content on the client side.
- Next.js
In contrast to the above approach, Next.js is SSR (ang. server-side rendering) framework. The render process happens on the server side and in the end browser gets whole data. This solution is very efficient, but not that cheap, because we have to deploy our app for Node.js server.
- Gatsby.js
It’s also an SSR framework, but Gatsby presents a completely different approach to creating applications. Our app’s content is rendered during the build process and the browser only displays prepared data. This is all magic of this framework. We can achieve 100% in Google Lighthouse tool audit without any problem.
Winner: Gatsby.js
Maintenance, structure
- Gatsby.js
The biggest advantage of Gatsby.js is its own CLI.
It’s a kind of tool for creating initial project configuration.The documentation is very legible. Configuration of project (e.g., webpack) is very easy.
- create-react-app
The same as Gatsby, but without its own CLI, so configuration of the project is sometimes cumbersome, especially for beginners.
- Next.js
Next.js offers a low entry barrier for developers, but in the following part of the project we have to know how node.js works. The cost of this solution is much higher. Why? Next.js requires VPS (ang. Virtual Private Server) instance not like create-react-app and Gatsby.js – basic server for hosting files.
Winner: Gatsby.js
SEO
- Gatsby.js, Next.js
In both cases SEO (ang. Search Engine Optimization) is on a satisfactory level. The browser receives these rendered files and then robots of Google or other search indexes our page.
- create-react-app
One of the disadvantages of this tool is SEO. Search’s robots know that it is a CSR solution and our content has worse index. Also, standard React application is indexed with about 2 weeks delay.
Loser: create-react-app
Frequency of modifying data
It’s not actually a feature, but a factor we have to consider when we create products for our customers.
- create-react-app, Next.js
Like I wrote before, create-react-app is a CSR solution, so the user gets application data when the browser renders our provided content. In turn, Next.js is an SSR approach, so the whole process of rendering happens on the server. In conclusion, both solutions solved our problem.
- Gatsby.js
If we’re going to often modify data either in CMS (ang. Content Management System) or other backend, Gatsby.js won’t be a good solution. Why? Like I said before, the uniqueness of this framework is rendering the whole content during the build process, so every change requires a build to update data. This makes Gatsby.js a very efficient and fast framework. In some cases it is a huge advantage, but not always.
Loser: Gatsby.js
In conclusion, each solution has its advantages and disadvantages, but it’s worth knowing them before we make a final decision. We need to know the needs of the target users and choose the most optimal solution, because neither of them is flawless.
Let’s do IT!
Miłosz Bauman, Front-End Developer