Translated from Malcolm Laing

Original text: medium.com/frontend-di…

Which tool should you choose for your application?

When creating a new React project in 2021, there were two clear choices: NextJS or create-React-app. Gatsby has fallen out of favor.

Because of the slow scale build, NextJS is a better static site generator.

Let’s review the pros and cons of NextJS and create-React-app, and we’ll look at which use cases and scenarios are more appropriate for either.

Create-React-App

Create-react-app is a scaffolding that allows us to Create a new React application for us. It wraps WebPack and Babel together into a new scripting tool called React-Scripts to manage the entire application, which reduces a lot of complexity and learning costs.

This means that updating those “hidden” dependencies is easy. Wait for a new version of the React script and then update it. There is no need to arbitrarily fix major changes to the WebPack configuration.

The advantages of using create-React-app

More liberal

You are welcome to use any library you like, there are no rules or recommendations, you can use any routing library you like.

Render on client side

Create-react-apps are easy to deploy because they are rendered on the client side.

You can host your application on any file host, such as S3. Client-rendered applications are easier to use and deploy.

The Create – React – the disadvantage of the App

It’s hard to customize.

If you need to customize the Webpack configuration, your only option is to use a third-party tool such as Craco or Eject (pop-up, which itself provides functionality).

Once ejected, you lose most of the benefits of using create-React-app.

Abstracted complexity.

If you’re going to do something create-React-app supports, it works fine, otherwise it would be complicated.

Create-react-app is easy to use because it hides the complexity of Babel and Webpack configurations.

But it prevents developers from learning more about how these important tools work.

Bad for SEARCH engine optimization

Since it does render on the client side, it struggles with SEARCH engine optimization and should not be used for e-commerce or marketing efforts.

NextJS

It’s almost unfair to compare NextJS to create-React-app, since so many more developers use NextJS.

Because CRA is just a scaffolding tool, Nextjs is a framework for building React applications.

Out of the box, it gives you server-side rendering, static site generation, serverless capabilities, and more.

It is a toolkit that gives you everything you need to create high-performance Web applications.

Advantages of using NextJS

Fast.

NextJS applications have grown rapidly due to server-side rendering and static site generation.

Many performance optimizations for our application, with performance as the default setting.

It is easy to deploy.

Vercel (the company behind NextJS) makes it easy to deploy full-stack React applications.

With just a few clicks, you can set up a professional deployment pipeline. This includes preview deployment and production deployment.

It gives us API routing.

NextJS gives us a quick and easy way to build apis in our applications.

If your application uses third-party apis, you often need your own API to broker requests and keep tokens secret, and NextJS API routing is a good fit for this use case.

Easy to customize.

NextJS allows us to customize the Babel or WebPack configuration, making it easy to add a WebPack loader or Babel plug-in.

Disadvantages of using NextJS

Very stubborn

There is only one way to handle routing in NextJS, and you can’t customize it.

NextJS is limited to its file-based router, and dynamic routing is only possible when used with NodeJS servers.

How should you choose according to the application?

When to use NextJS

When building the landing page

NextJS shines in creating landing pages and other marketing materials.

When SEO is important.

Search engine optimization is more important than ever when creating e-commerce sites.

NextJS shines in this technology thanks to server-side rendering.

When you build a website like this.

Rendering our application on the server takes the load off the client side.

For users with slower devices, this can lead to faster load times.

When to use create-react-app

When building a background application

If your application is only available to authenticated users, it will lose most of the benefits of server-side rendering.

For this use case, the client-rendered application works fine and is easier to host and cheaper.

When building a Web application.

Web applications typically benefit less from server-side rendering.

They are often used by repeat users and we can use caching to provide lightning-fast load times for them without the cost or hassle of SSR.

Other highlights

  • 21 snippets of JavaScript code for every front-end programmer

  • 8 React Libraries you should Try in 2021

  • 17 Optimization Tips for Writing JavaScript Code in 2021

  • CURD API with Node, Sequelize, Postgres, and Docker

  • 5 libraries you’ll use for the React project in 2021

  • Every Web developer must have 15 VSCode extensions by 2021

  • 73 NPM packages to improve productivity