Gatsby vs. React Static vs. Next.js: What is the best React-based Static Site Generator?

Introduction

I would imagine that you’ve found your way to this blog post because you understand the Jamstack and recognize its strengths and its weaknesses. It's effective. The allure of faster load times and serverless architecture is strong and web developers all over the world are now using the Jamstack. So, how can you leverage the latest frameworks to gain that edge over the competition without breaking the bank? Well Keep reading to find out We will be comparing three of the most popular React-based frameworks that are compatible with Ionos Deploy Now: Gatsby, Next.js, and React-Static; their use-cases, pros, and cons.

Gatsby

Gatsby is one of the more well-known React frameworks because it is very versatile and has a strong development team driving its growth. Another thing that defines Gatsby as a popular framework is the documentation available from their site. Without well-organized documentation, we, as developers, are already placed at a severe disadvantage. My love of documentation aside, I've compiled a list of the pros and cons of Gatsby below, as well as some use-cases to help jump-start your creative spirit.

Pros

• Speed - When there is no server delivering your site's resources load times will decrease. As we discussed earlier, this has the potential to increase your business's revenue over the long term.

• Security - Since there isn't a server to attack, your company's forward-facing assets will be a lot safer.

• Configuration - Configuring web servers and their accompanying technologies is stressful, to say the least. With a serverless architecture, you won't have to worry about configuring web servers ever again.

• Scalability - Gatsby scales effortlessly which makes it a wonderful choice for medium to large-size businesses.

• Re-hydration - Even though Gatsby's main use is static sites, it can re-hydrate into a fully functional react application.

• Plug-ins - Gatsby comes with a rich plug-in library and let's be honest, who doesn't love plug-ins?

• GraphQL Support - Used to streamline the process of fetching data from external and internal sources.

Cons

No GUI - Gatsby doesn't offer a graphical interface for interacting with their framework. For some this is not a problem, for others, it could be a barrier to entry.
Learning Curve - Whether this is your first time using a CMS or you're migrating from another platform you'll have to learn how to use Gatsby and its associated features.
Doesn't Support Dynamic Content - It is possible to serve dynamic content with Gatsby, it is not recommended and it is difficult to accomplish it effectively.

As you can see, Gatsby is a pretty powerful React framework. It's important to remember though, that Gatsby is only useful for certain kinds of websites and applications. I've included a few different examples below...

Use Cases/ Examples
Gatsby is great for sites that have a large number of pages such as blogs, news sites, documentation portals, and things of that nature. Whether it's a single page or ten-thousand pages, Gatsby makes creating them easier than ever. Here are a few noteworthy sites that were built using Gatsby:

• www.figma.com
• www.reactjs.com
• www.affirm.com

Deploying Using Ionos Deploy Now

1) Create a new site by entering the following commands in your terminal:

npx gatsby-cli@latest new gatsby-site
cd gatsby-site
npm run develop 

2) Visit your site locally by copying localhost address from the CLI stdout to your browser bar.

3) Now, create a new Git repository on GitHub and copy the URI of the repo to your clipboard.
Initialize git and push your project to the created GitHub repository using the following commands:

git init
git add .
git commit -m "initial commit"
git branch -M main
git remote add origin git@github.com:username/reponame.git 
# replace the above repo with the URI of your repo
git push -u origin main

4) Setup deployment by signing into your Deploy Now account and clicking “New Project.” Next, choose the source you want to deploy from. Grant the requested permissions to IONOS and proceed to choose the following configuration:

5) Now, take a short break until your project build is deployed. Deploy Now will always show you the current build and deploy status of your project. When it is finished Deploy Now will provide you with a direct URL to your project. You can also find a new workflow file within your repository named .github/workflow/deploy-now.yaml.

React Static

React Static is an open-source progressive site generator written by Tanner Linsley and released in late 2017. A progressive site generator is functionally similar to a static site generator with several key differences. Within the core of a progressive site generator sits a static site that, once requested by the user, begins re-hydrating itself into a full-featured react application allowing for extremely fast load times whenever a link is clicked since the page's assets are already rendered. An easy way to conceptualize React Static is that once a site is requested it progressively transforms into a React application regardless of the entry point. This clever feature coupled with all of the pre-existing benefits of a static site generator makes React Static an attractive choice for developers looking to deploy a static site.

Pros

• Speed - Since the site is re-hydrated into a full-featured react application there is no need to reload any resources while the user interacts with the site. This results in near-instantaneous response times.
• Security - Just like a regular site built using a static site generator, there is no server involved and that is automatically going to result in a more secure site.
• Scalability - React Static performs well on everything from single-page sites to larger sites with thousands of pages.
• Re-hydration -The ability to turn a static site into a full feature react application is what defines React Static.
• Data Handling - React Static is flexible on where you source your data. On top of that, React Static also allows for data to be displayed/updated in real-time. Seo Friendly

Cons

• No GUI - Unfortunately, React Static has no GUI to interact with making it a little more difficult to learn for some.
• Learning Curve - Utilizing React Static will require a good amount of learning but hey... a lot of the strongest frameworks and tools out there require time and effort to get the hang of.
• Limited Use-Cases - React Static, while extremely useful, isn't a one-stop for all of your web development needs. Its utility is limited to a certain subset of websites.
• Minimal Documentation - The amount of documentation released for React Static is pretty limited.

Use Cases/ Examples

Here are a few examples of pages made with React Static:

• stoplight.io
• vector.dev
• turbotax.intuit.com

What makes react-static an interesting framework is the fact that it rehydrates your static site into a fully functional react application. So if serving up static pages at breakneck speeds is something that you can see you or your company needing to do in the future, then react-static is worth keeping in mind. At the same time, you need to remember that react-static thrives on the need to display static pages fast, so if you’re working with a site model that is JAMpacked (excuse the pun) with dynamic pages full of unique styles then react-static may not be the framework for you… yet!

Creating a react-static Site

1) Create a new site by entering the following commands into your terminal:

 npm i -g react-static
 // or
 yarn global add react-static

]

2) Start a new project by entering these commands into your terminal:

react-static create

3) Follow the prompts within your terminal to configure your project. For the sake of this example we will be using the basic template.

4) Now, create a new Git repository on GitHub and copy the URI of the repo to your clipboard. Afterwards initialize git and push your project to the created GitHub repository by the following commands:

git init
git add .
git commit -m "initial commit" 
git branch -M main
git remote add origin git@github.com:username/reponame.git 
// replace the above URL with your GitHub repo that you // created
git push -u origin main 

5) Next, Setup deployment by signing into your Deploy Now account and clicking “New Project.” Choose the source you want to deploy from. Grant the requested permissions to IONOS and proceed to choose the following configuration: JavaScript, then Node.js and public. Congratulations your site is deploying!

Next.js

Next.js is a hybrid static site generator. This essentially means that Next.js can accomplish nearly everything we have discussed up until this point and more. Most importantly though, Next.js is production-ready and has excellent support for SEO optimization. However, there is one caveat: with all of the wonderful features, such as pre-rendering, code-splitting, SEO-optimization, etc... you are required to run Next.js in tandem with Node.js which is ultimately outside of the scope of this article, however, static generation/ pre-generation works with Deploy now but Node.js can only be used at build time NOT at run time. Even though this article centers around Deploy Now, we figured Next.js is such a great framework that it deserves an honorable mention.

Pros

• Speed - Next.js is an extremely fast framework, not as fast as React Static, but fast nonetheless.
• Production Ready - Next.js is production ready straight out of the box.
• Documentation - Next.js has excellent documentation that is well kept and updated frequently.
• Code Samples - One unique feature of Next.js is the large amount of code samples that they have hosted on both their site and Github. Each one of these code samples is free to use in your application without attribution.
• Code Splitting - Next.js supports code splitting.
• Typescript- Next.js supports Type Script.

Cons

• Node.js Dependence - Next.js requires node.js to run in most situations.
• Security - Considering that next.js has a larger amount of dependencies it also has a larger attack surface than any of the frameworks we have touched on.

Examples/Use Cases:

Some sites that utilize Next.js include:

• tiktok.com
• twitch.com
• att.com

If your company needs a production ready website that can handle the load that comes with a small to medium sized business and the associated web presence then Next.js is definitely worth looking into. As you can see some of the biggest companies in the world use Next.js because of its ease of use and scalability. If you are interested in learning more about Next.js, make sure you check out: https://nextjs.org/.

Deploy Using IONOS Deploy Now

1) Create a new sitelocally by entering the following commands into your terminal:

npx create-next-app@latest next-site
cd next-site
npx next@latest dev

2) Visit your site locally by copying the localhost address from CLI stdout to your favorite browser.

3) Enable static HTML export.
NOTE: Currently, Deploy Now doesn’t support image optimization available in Next.js >=, so you have to edit the index.js file to remove this feature:

4) Delete the following import from pages/index.js:

 Import Image from 'next/image'

5) Next, locate the following image tag:

<image src="/vercel.svg" alt="Vercel Logo" width={72} height={16}/>

6) Replace it with the standard HTML img tag:

<img src="/vercel.svg" alt="Vercel Logo" width=72px height=16px>

7) Next, edit the package.json file and add the export option prerendering all pages to HTML:

"scripts": {
    ...
    "export": "next build && next export"
},

8) At last, adapt .eslintrc.json to overcome Next.js eslint rules restrictions:

{
    "extends": ["next", "next/core-web-vitals"],
    "rules": {
        "@next/next/no-img-element": "off"        }
}
)

9) Now, create a new Git repository on GitHub and copy the URI of the repo to your clipboard. Afterwards initialize git and push your project to the created GitHub repository by the following commands:

git init
git add .
git commit -m "initial commit" 
git branch -M main
git remote add origin git@github.com:username/reponame.git 
// replace the above URL with your GitHub repo that you // created
git push -u origin main 

10) Setup deployment by signing into your Deploy Now account and clicking “New Project.” Next, choose the source you want to deploy from. Grant the requested permissions to IONOS and proceed to choose the following configuration: