We publish a new translation for aspiring React developers. We hope this article will help you in choosing the right tool for your next project.
When it comes to creating new projects in React, we have an obvious choice: NextJS or Create-React-App. Gatsby is largely out of use due to slow builds when scaling. In addition, NextJS is becoming an increasingly convenient static site generator.
Photo by Artyom Sapegin on Unsplash
In this article, we'll take a look at the advantages and disadvantages of NextJS and Create-React-App, as well as discuss which use cases are appropriate for each.
Create-React-App
Create-React-App is a set of tools that allows you to create new React applications. The CRA stores dependencies like webpack and babel inside react scripts. Create-React-App makes it easy to work with transpilers and bundlers.
This means that updating these "hidden" dependencies is not difficult at all. You need to wait for a new release of react scripts and update. We don't have to mess around with fixing breaking webpack configuration changes.
Benefits of using Create-React-App
Unopinionated
Any library can be used, there are no rules or guidelines. The choice of the library for routing is also at your discretion.
Create-React-Apps is rendered on the client side
Since we are rendering Create-React-Apps on the client side, deployment is easy. We can host the application on any file hosting, for example, on S3. CSR applications are much easier to work with!
Disadvantages of Create-React-App
Difficult to customize
There is no built-in way to customize the application. If you need to tweak your webpack configuration, your only option is to use a third party tool like craco or eject. However, after running the eject command, you will lose almost all the benefits of using Create-React-App.
It abstracts away the complexity of
Create-React-App works great until you have to do something it doesn't support. It will be hard! By hiding the babel and webpack config, Create-React-App makes getting started easier. However, this prevents developers from learning more about how these vital tools work.
Negatively affects SEO
Since we are rendering Create-React-Apps client-side, the tool is tricky to implement SEO. Create-React-Apps shouldn't be used for e-commerce or marketing purposes.
NextJS
It's not entirely correct to compare NextJS and Create-React-App, because NextJS is so much more. While CRA is a tool for scaffolding React applications, NextJS is a framework for building them. Out of the box, NextJS provides server side rendering, static site creation, serverless functionality, and more. This is a whole set of tools that gives us everything we need to create effective web applications.
Want to take it even further with NextJS? Try HappyKit .
HappyKit provides NextJS applications with repetitive tasks (CRON tasks), very simple analytics and feature flags. You can sign up for the beta here !
Benefits of using NextJS
NextJS is lightning fast!
Thanks to server-side rendering and static site generation, NextJS applications run significantly faster. Next takes care of the default performance optimizations.
Easy Deployment
Vercel (the company behind NextJS) makes it easy to deploy full-stack React applications . A couple of mouse clicks and you have a professional deployment pipeline. The process includes pre-deployment and production deployments.
NextJS provides routing
NextJS provides a quick and easy way to create APIs in applications. If your application uses third-party APIs, then you often need your own API for proxy requests and token storage. NextJS routing is perfect for this.
Easy to customize
NextJS lets you customize babel or webpack configurations. Adding webpack loaders or babel plugins is easy!
Disadvantages of using NextJS
NextJS is an opinionated framework
There is only one way to work with routes in NextJS, and you can't customize it. NextJS is limited to its file-based route and dynamic routes are only possible when using a NodeJS server.
When should you use NextJS?
When creating a landing page,
NextJS is great for creating a landing page and other marketing tasks.
When SEO Matters
When building e-commerce sites, search engine optimization is more important than ever. Thanks to server-side rendering, NextJS stands out in this regard as well.
When building websites,
server-side rendering of the application eliminates the need for clients to render on their devices. For users of slower devices, this can result in faster boot times.
When should you use Create-React-App?
When building a gated application
If your application is only accessible to authenticated users, it loses most of the benefits of server-side rendering. In this case, CSR applications work fine, they are easier and cheaper to host.
When building web applications,
web applications generally benefit less from server-side rendering. Typically, these applications are reused by users, and we can apply caching to provide lightning fast loading without the cost and hassle of SSR.
We hope this article helped you decide if NextJS and Create-React-App are right for your next project. Both of these tools are very cool for building React apps. You won't be able to choose a winner: for some cases it is better to use NextJS, and for others - Create-React-App.