Gatsby vs Next.js vs create-react-app ⚔️ - what are they and what are the differences?

If you're a web developer you've probably heard at least about one of them. If you're doing react, I'm pretty sure, that you heard of them all. And you might have wondered what the differences are. Let's clarify these here.

Gatsby, Next.js, and create-react-app are systems to build React applications without having to handle the bundling of the app e.g. via webpack yourself. They help you to set up and run React applications quickly.

Gatsby

Gatsby is a static site generator. That means, that your pages will be prepared at build time, not on runtime. For a lot of use cases that's sufficient. E.g. for a forum it might be a bad choice because you would have to run your static site generator every time a forum post was done. The advantage is, that these pages are usually very performant. That's especially good for SEO nowadays. So static site generators are a good choice for landing pages or your blog, where content doesn't change often.

Gatsby is quite opinionated and you have to use graphQL. That might be the right thing for you, but it also might not.

Another big advantage of Gatsby is the vast ecosystem of plugins. From using Google Sheets as a CMS, to converting images, implementing analytics or newsletter integrations. You'll find a lot. Therefore Gatsby seems to be one of the most powerful Wordpress contenders. Especially because it has a pretty good SEO score out of the box.

create-react-app

create-react-app is a nice tool for react development because you can basically start developing your React application with zero configuration.

It's not necessarily meant for running apps in production, though that's definitely possible. The main problem is, that it doesn't render pages on the server. It only supports client-side rendering. This might be an issue if you need a highly performant site, or if SEO is a big topic for you. There are still some benefits to server-side rendering. If you need these, you should have a look at Next.js.

Next.js

Next.js applications are rendered on the server-side (SSR) and on the client-side (CSR). If a static page is not enough for your needs and you need SSR, then Next.js might be the right choice for you.

It has some nice concepts like file system routing (you can just create files in that pages folder, that will then be actual server and client-side routes in your application) or an integrated zero-config CSS-in-JS solution, which you can optionally use (styled-jsx).

It's super simple to start, develop and even host. For every dynamic page, Next.js might be the best choice in react land, if you don't want to write your own bundling, code splitting, etc.

Please follow me, if you're interested in web development topics like this one, especially if you're interested in Next.js or **GatsbyJS++, because I'm going to write a series on each, that will also appear on my blog.

Thanks for reading!