Create React App vs Gatsby vs Next.js

This comparison is an ongoing occurrence among developers when it comes to selecting the right option for a front end project.

When we consider these three technologies separately, we see a common denominator. That is React (opens in a new tab) ⚡️

What is React?

I’m not going to go into much detail but in layman’s terms, React is a front end JavaScript library that can be used to create UIs.

React is not a framework like Angular (opens in a new tab) rather it mainly focuses on the view of an application.

Then what are CRA, Gatsby & Next.js?

All of these are frameworks that are built on top of React. Each of these tries to abstract certain complexities of React to give better Developer Experience (DX) to the target audience.

Let’s look at one by one.

Create React App (CRA)

Create React App (opens in a new tab) is created by the React core team hence it is considered as the official boilerplate for generating single-page React applications. CRA is based on a powerful CLI tool (opens in a new tab) and you can use this to customize how your application is scaffolded.

🤔 When to use CRA?

CRA is useful if you want to build an application that is single-page and renders on the client.

This is ideal if you want to build an application like an Admin UI which doesn’t require you to have multiple pages, optimized SEO etc.

Gatsby

Gatsby (opens in a new tab) is a static site generator that uses the power of React, Webpack (opens in a new tab) and GraphQL (opens in a new tab). Gatsby also has a powerful CLI (opens in a new tab) which guides you step by step in order to create an optimal application based on the requirements.

🤔 When to use Gatsby?

Gatsby is ideal if you are building a static website. It can generate a multi-page super performant sites and the best thing about Gatsby is the rich documentation and ample plugin ecosystem.

If you need the best SEO support, look no further.

Gatsby also has a lot of starters to choose from and there are recipes of almost every use-case.

Next.js

Next.js (opens in a new tab) is a lightweight framework which supports both client and server rendered applications. It has a lot of features out of the box for routing and styling and tries to abstract some of the complexities in React. Create Next App is the CLI (opens in a new tab) tool for Next.js.

🤔 When to use Next.js?

Next.js is ideal for dynamic websites. With Next.js you get the flexibility on per page basis, whether to render on client side, server side or hybrid.

Next.js is highly performant and scalable. It supports lazy loading and the framework handles a lot of the complexity on behalf of the developer.

If you have a complex large application with a lot of pages, Next.js is ideal.

Try them out

Rather than taking my word, it’s always best to try each of these out and select a framework which is suited for your use-case.

Conclusion

Hope you found this blog post useful.

Signing off… ✌️❤️