DEV Community

Benjamin Mock
Benjamin Mock

Posted on

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!

Discussion (8)

Collapse
lucasfrutig0 profile image
lucasfrutig0

And for ecommerce?

Collapse
benjaminmock profile image
Benjamin Mock Author

Use an existing solution. It's a lot of work. A lot! So woocommerce or maybe even shopify might be for you. If you absolutely want to build it yourself, I'd recommend Next.js, because it's more suited for dynamic pages, like stock inventory, a cart ...

Collapse
alfanzain profile image
alfanzain

If when I use this (nextjs.org/learn/excel/static-html...), is it still called 'dynamic pages' or not?

Collapse
maxxheth profile image
Maximillian Heth

It's also possible to tap into WooCommerce or Shopify via their respective APIs with Next.js.

Collapse
lucasfrutig0 profile image
lucasfrutig0

Nice! tks! I don´t want to build absolutely by my self no. I trying use Shopify API + Gatsby. It's kind great.

Collapse
kdev291 profile image
@kdev29

clear and concise, thanks.

Collapse
anassdaoudi profile image
Anass-Daoudi

Thanks for the information 👍
One question please, what tech stack are you using for building your own blog? Where do you host it?

Collapse
benjaminmock profile image
Benjamin Mock Author

It's Gatsby and I host on netlify