tomgrabskiBuilding any application is a challenge itself, but modern technologies can make the development process a bit less painful. Thanks to them, you can focus on your business objectives.
To make your choice of these technologies easier, once in a while we take a closer look at them in our blog posts. Our goal is to help you make a good decision on what to use in what case.
This time, let’s take a look at Create React App (CRA) vs Next.js.
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 can use the latest JavaScript features
- 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 tools needed for React project start. So instead of wasting time on configuration, you can focus on building an app right away.
If you want to learn more about Create React App, check its README and the User Guide.
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.
To achieve these goals, you can either use a boilerplate like React Milkshake or a framework based on React like Next.js.
Advantages of using Create-React-App
It gives you freedom.
No more using a particular library just because you have to – Create React App gives you a 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 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 of such a solution – at the moment of the ejection, you lose the future support.
It’s limiting.
If you want something out-of-the-box, something that CRA doesn’t support by default, well, it gets messy. 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.
Next.js
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.
Next.js features:
- Server-Side Rendering (SSR)
- Static exporting (SSG)
- Pre-rendering
- Automatic build size optimization
- Faster development compilation
All these features helps you with building a performand 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 doesn’t make Next.js 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 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 possibility to add Webpack loaders or Babel plugins.
Disadvantages of using Next.js
It’s opinionated.
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.
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.
