CRA vs Next.js vs Gatsby – Comparison and How to Choose One

Once you’ve finished creating your “create react app”, you may have started to hear “Next.js” and “Gatsby”. From many aspects, it may look similar. But each has a purpose, their own pros and cons. One won’t fit for all. In this post, I’ll discuss the difference between CRA (create react app), Next.js and Gatsby, how to choose one, what I’m using etc.

Create React App

Create React App is plain simple and it generates HTML code needed to render on the client side. So when you look at the source code before rendering, you can see it’s basically few js files and an empty div. These js files inject content into that div in the browser (Client-side rendering). All heavy lifting is done in the browser.

Next.js

Next.js a somewhat similar to Create React App, but supports server-side rendering. What it essentially means is that necessary HTML code is generated from the server itself, based on the URL. So your browser is receiving pre-rendered HTML code, not an empty ‘div’.

Gatsby

While CRA offers client-side rendering and Next.js offers server-side rending, Gatsby is something called “Static Site Generator”. If you’re new to static site generators, those are generators which build “HTML” code during the “build”, by fetching data from some APIs, markdown files or anything. Note that everything is done in the “build” process. Similar to Next.js browser receives pre-rendered HTML code.

A comparison of CRA vs Next.js vs Gatsby

I hope that should give you some clarity on the difference of each. But I know it’s still not for many. So here are some example sites, which one will I choose and why.

Real Life Examples

A Landing Page for a Product (e.g.: mfy.im)

CRA – Dead simple to create one. But lacks SEO because in order to ‘view the site’, JS files must be executed

Next.js – Good for SEO, since everything is generated from the server. Since content is static you can take advantage of static export

Gatsby – Static content, so perfect of Gatsby. Also, could take advantages of plugins like AMP, PWA, inline critical CSS etc

What I’ll choose: Gatsby seems to be a winner here. However, CRA can do the same stuff with pre-rendering. Read my post: Prerender React App for SEO without SSR or Next.js. If you got enough time I would recommend Gatsby. CRA should also work fine

A ToDo app (e.g.: keep.google.com)

Since it’s a ToDo app we don’t need to consider about SEO, because “private todos” can’t indexed by Google

CRA – Todos are fetched in the browser by calling apis. Users will see ‘loading todos…’. Not a great user experience

Next.js – The list can be fetching from the server itself, so without any loading animations todos will be listed upfront

Gatsby – Todos are dynamic, will change any time. You can’t take advantage of Gatsby here because generating HTML files with todos on the build time is not a good idea. However, it’s possible to create dynamic websites with Gatsby, just like CRA

What I’ll choose – Next.js, since I can take the advantage of SSR here

A Blog (e.g.: coffeencoding.com)

Considering a place where I can manage my posts, it might be a CMS or markdown files

CRA – SEO definetly lacks. Users should be able to read the posts without any loading animations, fast

Next.js – Much better than CRA since users will be able to read the post right away. Good for SEO

Gatsby – Blog posts are static, they don’t frequently change. If you create a new/edit blog posts, npm run build should generate HTML pages with all the contents. If you’re using CMS, you trigger a webhook to rebuild it in Netlify. Perfect for SEO!

What I’ll choose – Gatsby, a perfect one. But I’m sticking with WordPress for my Blog. Why I choose WordPress instead of Gatsby (coming soon ?)

Still Confused?

Let’s discuss in Messenger, tell me what you’re building/your doubts. Click “Subscribe in Messenger” and just drop a line

Conclusion

CRA is easy. Next.js seems to be a superset of all. Everything in CRA can also be done in Next.js for better performance and SEO. Everything in Next.js cannot be done in Gatsby. But if you’re building a blog or static website you should definitely try it out. It offers a great developer experience as well as tools and plugins.