Kickoff a React project: CRA, Next.js or Gatsby?
A simple guide to not get lost into the React bootstrapping solutions out there, to learn more about CRA, Gatsby and Next.js.
Table Of Contents
- What is the right choice of that new project to build?
- CRA: create-react-app
- Gatsby
- Next.js
- What if I need something different?
This is a simple guide for humans to not get lost into the React bootstrapping solutions out there.
React is a Javascript framework to build powerful single page app, developed in Facebook since 2013, which propose a component based approach to build applications. The React development is based on a declarative model, where each component defines a portion of an application, using the JSX syntax, and these components can be combined together.
From the original design of React many features evolved, for instance the native Javascript class support for components, and with this evolution the number of features to configure in the building pipeline of a project increased, together with the complexity of the configuration.
Starting a React project implies the configuration of multiple tools like Webpack, Babel and more to create the foundations of your web application: depending on the project requirements the configuration can get complicated and hard to maintain. This is the reason multiple code boilerplates started to popup on code platforms like Github: the evolution of few of those boilerplates eventually led to the creation of more advanced and specialized tools such as CRA, Gatsby and Next.js for most common needs.
What is the right choice of that new project to build?
The first step to make a choice is to understand what problems the tool solves, and if these solutions match our needs.
Let’s start from the end.
When to consider CRA for your project
- The application is single page and self contained on the frontend (no need for server).
- The application relies on server APIs
- You want to experiment or get started with React
- You want to try a new React project and pick utility libraries on your own
When to consider Gatsby for your project
- You are building a landing page
- You are building a static website (and the team likes React?)
- There are particular pages of your website in React that needs to be super performant (move them to Gatsby if they are already in CRA for instance)
- You need better Search Engine Optimization (SEO) or AMP (Accelerated Mobile Pages)
When to consider Next.js for your project
- The application is composed by both a server and client side
- The application is already in express.js and it needs to be extended also on the client side
- You are building a dynamic website
- You need SEO or AMP and you have dynamic content
Want to know more? Grab a coffee and continue reading…
CRA: create-react-app
Create-react-app (also known as CRA) is an official React CLI announced by the Facebook team behind React itself, in 2016: the goal of the project is to provide a simple way to bootstrap your Single Page Application (SPA) in React.
A Single Page Application is a web application made of a single HTML page but “virtually” by many other pages created dynamically on the frontend side.
CRA creates a simple web application to start, with most of the required configuration for most Single Page Application needs, for any taste: Typescript, CSS preprocessors like SASS or LESS and more. The application is bound to a single HTML page that, when open, loads the React application providing an incredible Developer Experience (DX) for the development process: errors won’t stop development any more, installing new dependencies doesn’t need to stop and restart, and more!
Note that there’s no bundled react library with CRA, or i18n, state management or other advanced features, so it’s completely up to the developer to pick the right library to include in its project. This makes the bootstrapped project less opinionated and ready to experiment with any React library or quickly prototype a basic application.
The final product of a CRA build is one single HTML page, with JS and CSS files containing the web application bundle. This means that the build folder can be statically deployed anywhere and it does not depend on any particular web server.
What if the configuration provided in CRA is not enough yet? In this case it is always possible to “eject” from the classic configuration, and customize it. The “eject” task has a main downside, losing the ability to upgrade again using the main create-react-app streams. There are few projects out there that help on that, like react-app-rewired project, which can be used in these scenarios, without a full “eject” and keeping the ability to upgrade later on.
Would it be possible to have the development experience of this tool on the server side? Use React to build a website that loads like static but it’s fast as a SPA when using it? This is the idea that powers Gatsby.
Gatsby
Gatsby is the solution created from Facebook to use React on the server side, or how is often referred as, React SSR (React Server Side Rendering).
The product of a React SSR is a plain HTML page, like any other backend rendering technology: the advantage of using React can be the “hydrating” process that can make it become a SPA on the front-end as explained below.
The goal of Gatsby is to make the development of websites super performant, leveraging the React developer experience. Although the website is modelled as a SPA — even with a routing system in React, the Gatsby router — what it actually happens is that Gatsby will build both a static website and also a SPA out of it. The React SSR version of Gatsby can be seen as a “compile” step for all pages to let you serve them as static content.
Like CRA, Gatsby has many configurations providing support for Typescript, CSS preprocessors and more. Gatsby is particularly focused on websites, and it provides out of the box a system based on GraphQL for easy content fetching, with a multitude of plugins for theming and any kind of support.
The reason to build both a static version of the website and a SPA is to provide an instant loading of the website in few milliseconds via the static version, then “hydrates” the website with an equivalent React SPA to make it interactive: this means that the user will see the website have an excellent performance on first load, then on click it behaves as a client application without reaching the servers again.
This sounds awesome right? In fact this is great, but it comes with a limit: the website must be static so all possible HTML pages must be created in advance. This means that dynamic routes are not possible in websites built with Gatsby.
About the deployable artifact, with Gatsby we’re still building frontend assets: a folder full of HTML pages and JS/CSS scripts. The Gatsby team build a full infrastructure to help optimize the building step for the developers, named Gatsby Cloud. The deployment step in Gatsby is straightforward as it is a upload of the folder resources on a web server.
But is it possible to have a real server developed with React SSR with the possibility of a SPA on the front?
The answer to this is Next.js.
Next.js
Next.js is a project to bring React on the server side, build by ZEIT (now Vercel), with dynamic routes, and conjugate also the SPA experience with it.
Next.js is open source and developed in Node, and it works as a web server or it can be integrated into bigger node (express.js, hapi, fastify, etc…) applications, providing React as rendering engine: there are some additional React conventions in this tool to keep in mind, because the same application page can be rendered on the server, on the client or in AMP (Accelerated Mobile Pages).
The build version of a Next application uses Webpack under the hood to optimize the final application artifact: while already optimized, the configuration can be extended as will.
Next.js makes the integration seamless between back and front end development in Javascript (or Typescript) of complex web applications. The build products of Next.js are this time a Node.JS application with front end assets for the SPA.
Next.js provides a full React SSR experience with dynamic page rendering. Since Next.js 9.3 a new Static Site Generation feature is available, which aligns Next.js with Gatsby in the static generation market, providing a unique hybrid static and dynamic server rendering tool.
What if I need something different?
These three are only the most famous tools in the React world to start your project, but there are more for specific niches or tastes, for instance Docusaurus or react-boilerplate project
Using one of these tools will be probably the best bet to start with, but the React community managed to get some magic out of the hat already few times in the past, so feel free to explore out there for new and wonderful discoveries.
You can read the orginal version of this article at Codemotion.com, where you will find more related contents. https://www.codemotion.com/magazine/dev-hub/web-developer/kickoff-a-react-project-cra-next-js-or-gatsby/
