Choose the Best Tool for You: Create React App (CRA) vs. Next.js
When learning React, one of the first experiences you’re likely to have as a developer is using Create React App (CRA). But, there will come a point when CRA might not be the best fit for your needs anymore, and you will need to move onto something more feature-rich. For example, if you find yourself constantly extending CRA’s functionality to add features not natively offered in the base project created by the tool, then it’s a good indication to look for something that offers them out of the box to minimize repetitive tasks.
So, in this post, we’re going to cover how CRA works, as well as what it’s good for, and compare it to a more feature-rich React framework: Next.js. Together we’ll explore what the differences are and how it solves the shortcomings of CRA.
What is Create React App (CRA)?
CRA is a tool that developers can use to quickly spin up a React project that includes a series of pre-configured things such as a basic file structure for the website and a development server to run the website locally for easy development.
CRA doesn’t do anything too fancy. It’s designed to get you up and running with a React project as quickly as possible. With this in mind, CRA generates a basic React project that is a Single Page Application (SPA), and it utilizes Client-Side Rendering (CSR) so you can start building a React project quickly. It’s also worth mentioning that CRA isn’t just limited to CSR, it can be configured to use Server-Side Rendering (SSR), but the React development team doesn’t actively support this and instead recommend using a different tool.
This sentiment is also true for CRA in general; you could add in more complex functionality yourself, but if you’re looking to implement something complex like SSR, someone else has likely already done it and packaged it up into a new framework that can save you the time of learning, developing, and maintaining it. There’s no need to reinvent the wheel if the wheel serves your purpose without issue.
Single page applications (SPAs)
It’s worth knowing that when you generate a project using CRA, you’re actually generating a single-page application (SPA). This means it’s important to understand both what an SPA is, as well as its benefits and limitations because they directly correlate to the pros and cons of using CRA.
Benefits of creating SPAs using CRA
Now that we know more about how CRA and the SPAs it makes, let’s think about the benefits of building an app this way. There are two key benefits to keep in mind.
Smoother UX and faster page updates
Because, as mentioned above, SPAs don’t need a full page refresh with each page change. That means the user experiences a much smoother and faster interaction as the page changes. Page changes can be nearly instant, giving the impression that the website is incredibly fast and responsive.
Better offline support
Limitations of using CRA to create an SPA
Unfortunately, CRA also has some limitations to it because of the SPA base it produces, and they’re often what drives developers to reach for a different tool. The major limitations and downsides stem from the fact that the rendering method CRA implements is CSR.
Slower initial page load
CSR is a fast rendering method after the initial page load because all of the required information is downloaded and is on the client. The issue is that the initial download of this data on the first-page load is much slower than other rendering methods, like server-side rendering (SSR) or static site generation (SSG). This is because when using CSR, you need to download all of the required JS files before the page can even render.
Connected to the slow loading times are potential detriments to SEO, since they make users more likely to bounce from your website.
To close out the benefits and limitations, it’s worth remembering that if the benefits already perfectly cover your project’s requirements, and the limitations are no issue, you might have found a good fit with CRA. But, if not, if you find there are some things lacking or features you are missing then stay tuned for a look at Next.js.
What is Next.js and how does it solve CRA’s limitations?
If you found yourself nodding along in agreement (or frustration) with the limitations of CRA, then maybe Next.js is the answer for you. It’s a React-powered framework that solves many of CRA’s issues straight out of the box without you needing to add any complex features yourself!
Next.js was largely born out of frustration with CRA and the inherent limitations of using CSR, such as the slow initial page loading times and poor SEO support. Next.js solves these issues by allowing you to use Server-Side Rendering (SSR) and Static-Site Generation (SSG) to build complex and more advanced website types with relatively little configuration.
It even allows you to use multiple rendering methods (CSR, SSR, SSG) within one app and switch between them as needed. This means you can always choose the best rendering method for the situation you’re in and not have to use the same one for the entire website and suffer its limitations.
Overall Next.js takes the base offerings of CRA and turns up the power. You can build simple SPAs in Next.js but also more complex apps like SaaS products and e-commerce platforms, while leveraging the performance, SEO, and flexibility gains of using targeted rendering strategies. There is a reason some of the largest and most consumed websites rely on Next.js as their platform of choice.
Next.js doesn’t stop there either; it also adds multiple features to make developers’ lives easier, such as:
- File/directory-based routing and dynamic routes
- API routes (serverless functions)
- Extensive integrations and support for new tools and frameworks
- Built-in optimizations for images, fonts, and more
So, should you use CRA or Next.js?
To round out this post, let’s look at when it’s best to use Next.js and when it’s best to use CRA. Next.js is an excellent fit for your project if you’re building a more advanced application that goes beyond the scope of an SPA and needs features like SSR or SSG and support for things like serverless functions or dynamic routing.
CRA on the other hand is a great tool if you’re learning React and/or are still getting comfortable with it since it’s the closest you’re going to get to straight React with no framework-specific features added in. CRA is also great for building quick projects and example sites that don’t need more advanced features like SSR or SSG. And, of course, CRA is great for building SPAs.
At the end of the day, both CRA and Next.js have their places in the world and serve different needs and roles. But, as the complexity of your project increases, it’s likely you’ll be reaching for something like Next.js more than something like CRA, but that’s not a reason to not understand CRA and its role in the React ecosystem.