Which is better to work WITH?

Gatsby, NextJs or Create React app

If you are a front-end developer or let’s say a React developer this article will be useful. However, if you are new or newer, React is a JavaScript library that was built to create beautiful UI components. Most programmers add additional libraries to their React applications, and each of the frameworks in the title is based on React. There are many different cases, when and why you might want to use each one. I’ll try my best to explain the difference and how to chose to work with each one of them.

Before we get started I want you to know that there is no such thing that one of these frameworks is better than the other, but each one of them is good at certain cases, I’ll be covering them in a second.

Let’s Get Started

First, if you are brand new, create-react-app is a perfect place to start. CRA ( Create React App ) aims to handle the minimum needed packages and development environment support to get started coding in React. It gives the developer a nice experience and will optimize your application for deployment in production. It configures webpack and Babel, and you only need to have npm and Node installed to get started.

The best use case for CRA is developing single-page applications. SPAs are websites that do not require refreshing when navigating through pages. This creates a very fast, fluid-like experience when browsing. They create home environments for a user and efficiently store user data locally during the time spent on the page. The experience is simple and easy to understand, it’s no wonder these applications are so popular.

Now let’s talk about simplicity, what do I mean by simplicity is basically two things, how hard is to develop the application, and how hard is to deploy it.
If you will try to deploy your app it will be fast and really easy. But on the other hand, CRA is not that good when it comes to server-side rendering, it's much better to do the rendering part in the front-end.
Let me give you an example of some websites that are build using React:
React JS is the foundation of big and mighty Facebook.

  • Facebook.
  • Dropbox.
  • Mattermark.
  • Tesla.
  • Atlassian.
  • Airbnb.
  • Netflix.
  • Reddit.

Gatsby provides development teams an open-source front-end framework for creating rich, optimized websites and a cloud platform for delivering them on a blazing fast edge network. You can Visit the Docs link.

First of all, Gatsby is the best way to develop static web pages with React. Gatsby sites are incredibly fast to build, and they are equally quick in performance. As you land on one of these static websites, the most critical data is loaded first, followed by a pre-rending of any additional data, giving the user a natural experience navigating its pages.

Some of the best cases to use Gatsby are personal portfolios and blogs, E-Commerce websites. It enables performative content, in a neat and orderly package. There are also thousands of plugins and templates that any developer can start with to get off the ground quickly. You are also able to seamlessly integrate services like Shopify and WordPress into your website.

Secondly, if you’re running a Gatsby project, you will have the benefit of all those fabulous plugins! take, for example, Gatsby-image-sharp, or Gatsby-source-WordPress (just give it a URL and have all your WordPress posts, pages, tags, categories, etc accessible through Graphql) and many more! You can pretty much connect anything to Gatsby, and it will work smoothly.

Also, Gatsby is one of the many tools available that support the JAMstack architecture. For the unfamiliar, JAM stands for Javascript APIs and Markup, or pretty much a static HTML website that utilizes javascript to make the magic happen.

JAMstack apps have a lot of benefits right out of the box including:

  • Easy to host
  • Cheap to host
  • It loads super quick (most of the time)

This means generally more often than not, you’re going to have a fast site that doesn’t cost you a lot of money to both host and maintains.

Popular companies building with Gatsby are the Braun shaving company and the Impossible Foods’ Brand website.

Last, but certainly not least, we have NextJS by Vercel Next.js, a simple and flexible framework built on top of React, which allows users to utilize a wide range of features like server-side rendering, static site generation, easy file-based routing, and much more!. Next is an ever increasingly popular framework, that truly does it all. It takes the great things about Gatsby, and CRA and offers them independently as well as in combination to developers. The team at Vercel challenged many of the common problems in the React community and delivered solutions over and over again. Notably Next takes a “zero-config” approach, tedious things such as routing, styling, and code-splitting are given to you out of the box.

The other major benefit of SSR over CSR is Search Engine Optimization (SEO). Since server-rendered pages are already prepared with relevant metadata, it is easy for crawler bots used by search engines like Google to classify these pages, resulting in a higher search ranking for the website. However, pages using CSR rely on JavaScript execution to fill out the metadata, which is not easily filtered by the bots. Often, if the execution takes more than 300–400 ms, the bot will end up processing a blank page. For a detailed explanation about search engine optimization, check out this article.

An ideal solution is to build a hybrid application that takes advantage of both of these techniques in order to optimize the accessibility and user experience, and Next.js offers an excellent starting point for this.

After we have seen what are these frameworks and their benefits etc, now
let’s see the three main questions that you need to ask yourself before choosing which one will be working with on your next project.

Do you need to ask yourself if you need a good SEO?
if ( not )=> you can simply go with create react app.

// now you need to ask another question
else if (yes && do your data needs to update very frequently) =>
if (not) => use Gatsby
else => use Next js.

Conclusion

Although I am clearly biased, all of these frameworks are great for developing applications with React. I myself am a newer developer and as I find new and interesting technologies, I will continue to share my love and passions for them. It’s an incredibly exciting time to be involved in web development, and I look forward to the coming advancements that will challenge and excite me.

I am always happy to connect, you can find me on LinkedIn, or you can check out my first Portfolio, or if you want to check some repo that I have you can find everything on my Github.

If you have anything to add please comment below and let’s share knowledge.

If you want master something teach it.