The Best React Framework

By Harry WolffUpdated November 18th, 2021

The Best React Framework Image

The best React Framework is Next.js.

Next.js prides itself on convention over configuration and it permeates every part of the developer experience. The out of the box settings defined by Next.js set up every developer on a path for success and enjoyment, letting you focus more on what you're trying to build then how to do it yourself. TypeScript is an opt-in experience for Next.js, however the opt-in experience is impressively simple: just add a tsconfig.json and start the Next.js dev server and you're ready to go.

Additionally it's incredibly easy to upgrade to the newest Next.js version and take advantage of all the newest features. Beyond upgrading the package version, the upgrade path is generally small, while the benefits are typically immense. For a short example, a recent upgrade to Next.js saw it migrate compiling JavaScript files from babel to swc, resulting in 5x faster builds.

Yet all that pales in comparison to one of the marquee features of Next.js: full flexibility of rendering your application. Most React frameworks force you to decide between static site generation (SSG) and server side rendering (SSR). Next.js lets you decide, on a page by page basis, what is best for your application. It even takes things a step further and blends those two modes to provide incremental static regeneration (ISR), enabling you to provide the best experience for your end users.

What is a React Framework?

Out of the box React does not provide all that is required to make a fully featured web application.

React provides the UI rendering engine, which is absolutely a big part of the puzzle, and it includes some basic state management primitives, but it omits a lot that is otherwise needed to build a full application.

Most notably, React does not provide a bundling solution, pushing you to use one of their recommended toolchains instead. This could have been ok, however none of these toolchains are maintained by the core React team, they're instead from the community.

Another core feature is routing, which React has no comment on, at all. All routing solutions are not only provided by the community, but not even mentioned on the React docs page (search for 'route' or 'routing' on their docs pages, and there's only but a passing reference).

A React Framework provides all the missing features required to make a modern web application, and more. It is the proverbial kitchen sink of functionality required to make a React web application.

Why would you use a React Framework?

A React Framework is great when you're starting a new project and need strong and sensible defaults.

They allow you to jump straight to application development and ignore all the tooling and infrastructure pain that would be otherwise required.

They are a quick path to success, but should also scale as your application grows as well.

Also good: Gatsby

Gatsby has a rich ecosystem of plugins and integrations that let you quickly create a web app that can pull in data from any third-party.

Unlike Next.js, which provides robust primitives, Gatsby allows you to add plugins to your Gatsby site to make it easy to pull data from most third-party source - think CMS, e-commerice backend, and more.

Gatsby's super power is how it uses GraphQL as an abstraction layer over every data source, giving you a common language for pulling in data. Conversely, this requires you learn GraphQL, and Gatsby's way of doing GraphQL, if you want to build a Gatsby website.

Gatsby is great for static websites, especially large marketing websites. Their integrations with WordPress API or other CMS's like Contentful make it very straight forward to get up and running.

The biggest tradeoff with using Gatsby is you're doing things the Gatsby way. This means you get a lot for free, but the migration costs off Gatsby are high due to the need to buy into the framework.

Skip: create-react-app

Create-react-app (CRA) was exciting when it was first released but it has been eclipsed by other more modern frameworks.

CRA provides some light conventions and opinions to help you get started with a React application, but beyond providing a bootstrapped Webpack configuration, CRA doesn't provide that much extra value.

Even more so, CRA is intentionally restrictive, making integrations with some third-party tools, such as Emotion's Babel transform, impossible without ejecting from CRA, thus rendering its value mostly useless.

Other options

React Frameworks are always an exciting part of the React ecosystem. There's many available to choose from, making it hard to decide which ones to write about.

Remix is a very new entrant into the space. Up until recently it was closed source, requiring a paid license to use. That changed when they raised funding and made Remix to be free and open source. Remix prides itself on being as close to "web fundamentals" as possible, encouraging you to "use the platform" as much as possible. While this does mean that Remix provides less than Next.js or Gatsby out of the box, don't be fooled at its approach and inital feature set. It's only at version 1 and the foundation it's starting with has a lot of future promise.