Gatsby, NextJs or Create React app
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.
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.
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.
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.
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.
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.
If you have anything to add please comment below and let’s share knowledge.