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 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’.
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
|Final HTML code generation||In the Client (Browser)||In the Server||In the ‘build’ process (CI/CD server)|
|SEO||Not good enough||Pretty good||Pretty good|
|Supports any kind of websites||Yes||Yes||Yes|
|Learning curve||Normal||React + few Next.js|
|React + Graphql + few Gatsby apis|
|Output||HTML + CSS + JS files||HTML + CSS + JS files + Node.js code to serve these files||HTML + CSS + JS files|
|Supports Netlify (or any static hosting sites)||Yes||No (yes, if only using static export)||Yes|
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.
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
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 😜)
Let’s discuss in Messenger, tell me what you’re building/your doubts. Click “Subscribe in Messenger” and just drop a line
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.