Choosing Between React, Gatsby, Next.js For Your Frontend

With the recent trends in Front-End Web Development, we've seen a lot of additions in the JavaScript frameworks collection, with each of them being unique in its own way, coming with its own perks and disadvantages.

As such, I wanted to have a look at the React side of things only, check the main 2 frameworks built on top of the React library, and see why would anyone pick one against the others, and what does each brings to the table in terms of Front-End development.

Note: In this article, for the sake of simplicity, I'll only compare the main reason that each framework/library was created in order to fulfill/the main application type that those technologies are used for:

• React -> SPAs
• Gatsby -> SSG
• Next.js -> SSR

If you want to research more in-depth about other applications that can be built using those technologies, I will give you a hint:

• React -> MPAs, SSGs, or SSRs apps (Since Gatsby.js & Next.js were built on top of React, it's obvious you will be able to do that from a CRA app if you wish to)
• Next.js -> SSG (Next.js officially supports both SSR & SSG applications setup)

Firstly, we'll have to get ourselves comfortable with 3 important concepts:

• SEO (Search Engine Optimisation)
• SSR (Server-Side Rendering)
• SSG (Static Site Generator)

Afterward, we'll be able to proceed with the comparison and analyze the pros & cons of each approach in terms of choosing the Front-End technologies (Framework / Library in our case):

1. SEO (Search Engine Optimization)

You might already be familiar with the concept, as it's thrown all over the place nowadays, but if you aren't, SEO is referring to the process/optimization of a website that has as a goal the higher ranking on Google Search Engine.

A well-optimized website in terms of SEO is likely to be listed on the first few pages of Google.

2. SSR (Server-Side Rendering)

SSR refers to an application's ability to render content on the server (Back-end) and return the whole page rendered, as opposed to rendering the page in the browser.

It is similar to how PHP, Ruby, Java, and other server languages/frameworks have been serving content from the beginning.

All of the data will be processed on the Back-end and after it's all been done, only then will the content be sent back to the client.

3. SSG (Static Site Generator/Generation)

SSG is a tool that allows for generating full HTML pages based on predefined templates and raw data which are prepared to be rendered ahead of time. As opposed to traditional CMSs, which are database-driven, SSGs generate content from static Markdown files/GraphQL without the need for a database.

Now that we've gotten a bit more comfortable with these concepts, let's check out the pros/cons of each technology mentioned in opposition with the others:

React

Pros:

• Supports creation of SPAs (Single Page Applications)
• Fast Development Time
• Higher Customisability
• Non-opinionated
• Great all-rounder
• A huge market of developers who know React

Cons:

• Needs more effort in order to improve SEO
• Generally slower applications
• Large first content paint, which might prove in a long loading process when first opening the application

Gatsby

Pros:

• Supports SSG & SSR out-of-the-box
• Great performance
• A lot of plugins/3rd party integrations to use
• Great for SEO
• More secure
• Fast development time

Cons:

• Bad when your application requires many updates
• A bit opinionated on Node.js & GraphQL (can use custom API as well though)
• Can get complex over time due to the high amount of configuration needed

Next.js

Pros:

• Supports both SSR & SSG out-of-the-box
• Great for SEO due to SSR Good performance
• Lightweight
• Easy setup process
• Easily-configurable

Cons:

• Highly-opinionated
• More likely to become extremely complex later down the development process

Which one should you use?

After going through the pros/cons of each, it's only natural to check out some use-cases for each framework/library, as such, you'll be able to get a better picture of which technology suits your business needs better.

React

As a result of React's CRA's pros & cons, it is best suited for scenarios where SEO isn't as important, or where development time has to be short.

Use-cases:

• Mostly everything that is available only after a login
• Management Platforms
• CRMs
• Dashboards

Gatsby.js

Whenever there is a requirement for good SEO, and rarely-changing content, Gatsby is well-suited.

Use-cases:

• Blogs
• Presentation Pages
• Small eCommerce apps
• Homepages Docs

Next.js

Next.js would be the main contestant whenever we're talking about good SEO and a lot of changes within the content of the application.

Use-cases:

• Social Media Platforms

• Big eCommerce apps

• SaaS Applications

  
  

Conclusion

With all of that said, I hope you now have a better idea about choosing the right Frontend technology for your project in terms of what React has to offer.

Cheers, all!