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.

To start then, let’s have a quick refresher on what an SPA is. SPAs are a type of web application that dynamically update a single HTML page without the need to perform a full page refresh in the browser every time a user changes the page. This is achieved by using CSR to render the page via a JavaScript framework like React and a tool like CRA.

SPAs work by downloading an HTML file from a server that typically has very few HTML elements in it. Instead, it links to the JavaScript files that are needed to render the actual page and its contents. The browser then downloads these JavaScript files and updates the original HTML file with the new content before then displaying it to the user.

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

SPAs don’t rely on servers to render all of the JavaScript into readable website pages for browsers; the pages on a website are instead rendered on the client side, in the user’s browser. This means we can implement offline support to our website via things like Service Workers to allow it to still load and function when there is poor or no internet connection.

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.

SEO issues

Connected to the slow loading times are potential detriments to SEO, since they make users more likely to bounce from your website.

Another downside of using CSR is the inability of some SEO bots and crawlers to parse and index your pages. Because SEO bots rely on fetching the page from the server and then parsing the content they receive back, if the SEO bot in question can’t parse JavaScript and then, in turn, render your SPA, it won’t be able to parse your website to understand your content, leading to SEO issues.

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.