Skip to main content
🍞
Insights
React Based Static Site Generators

React Based Static Site Generators

A lot has happened in two years (since we originally published this). However, React, and static site generators (SSGs) built on top of it are still gaining traction with frontend developers worldwide.

React Based Static Site Generators

ReactJS was first released in 2013, promising to transform front-end development. Though often critiqued for NOT delivering on this promise, React is still by far the most popular front-end framework/library (and it continues to grow). Last year's annual State of JS survey shows that the interest may be falling, but the usage of React is growing👇

Last year's annual State of JS survey.

Web development is an ever-changing beast. Yesterday's underdogs are today’s hyped frameworks/approaches/architectures/concepts _________________(add anything here). Take the Jamstack approach as an example. Five - six years ago, only a buzzword but today, an established web development framework (take these terms lightly, will ya!?) for pretty much anything, i.e., websites, ecommerce, and apps.

Many businesses not long ago relied on monolithic solutions for CMSs and eCommerce. That became a problem with new screens, markets, and channels emerging. The rise of headless architecture allowed businesses to think differently.

These new technologies/approaches significantly simplify the web development, management, and distribution processes while allowing a better reach, better performance, and better web in general.

As content types and consumption platforms further diversify, API and CDN ecosystems grow more, and modern browser abilities continue to evolve, it’s safe to presume that the adoption of these approaches will grow.

Why are we mentioning all of these here? Well, if you know React, and you’re ready to take advantage of the headless architecture and Jamstack, all you’ll need is a static site generator to bridge the gap...so to speak.

What Are Static Site Generators?

A static site generator generates a website to completely static HTML files, pre-built without any calls to the database or external data sources and server-side processing. 

As the online world evolved, websites have become highly complex. An influx of plugins and add-ons caused the websites to become slow, insecure, and complex to maintain. Static site generators address these problems.

A growing static site generator space plays a huge role in building a faster and better web.

❓Static vs. Dynamic Pages / Websites

For the sake of clarity, let’s define these. Static pages are served from a server or CDN, but they are not dynamically rendered on a server, i.e., you always get the same pre-built (HTML, CSS, and JS) page. You change page content with the JavaScript code executed in the browser (not the server).

On the other hand, dynamic pages generate content/pages with the help of a server or a serverless function for each page request. That means that each time you refresh a page, you’ll be served with a newly generated page that may differ from the previous one.

We already talked about what is a static site today in depth. Go, juggle your memory.

Why Use Static Site Generators?

Static site generators bring on many benefits by solving problems otherwise associated with dynamic websites.

Loading Speed

Unlike dynamic websites that generate your website pages in real-time, static site generators deliver a pre-build HTML file when the users request a page. The file is usually hosted on a content delivery network (CDN), enabling maximum loading speeds for your web pages and winning you the trust of search engines and users alike.

Security

Static site pages are HTML files that aren’t connected to any database. Because of this, cybercriminals cannot do SQL database injections (for example) or find similar server-side flaws.

That significantly brings down any security risks.

Simplification of Development and Management

We’ve established that static site hosting doesn't need databases, packages, libraries, or even a backend server. This alone makes static sites easy to use in development, managing, and migrating to another host whenever you please, without any complexity or compatibility issues.

Scalability

Dynamic websites frequently run into server overloads during traffic spikes. With static sites, that’s no issue making these incredibly easy to scale and serve as large a traffic spike as needed.

Why React?

React.js is an open-source Javascript library used for front-end development, usually for user interfaces of single-page web or mobile apps, allowing web pages to change data without reloading the entire page.

Facebook first introduced it for its news feed, designed to be fast and simplify the user experience, and it is most often used for dynamic websites. However, you may have noticed that these websites don’t exactly deliver on the speed promise anymore.

That’s why it’s often used for static sites today, too.

React’s ability to enable pre-built HTML files that increase loading speed makes it a perfect framework for building an SSG. React allows for a granular approach to making changes to your static website by making it possible only to edit one component file.

That means that the number of React-based static site generators is growing daily. Still, not all of those are the same.

From a developer standpoint, ReactJS is also “sexy” because it’s simple, efficient, and ready to be embraced. The developer experience with React JS is fantastic:

  • You kind of create your HTML tag.
  • You give them behavior easily (React Hooks are great).
  • You decoupled and organized your code as usual.
  • No syntax to learn compared to Angular, Vue, or Svelte.

Top Dogs, i.e., The Most Popular React SSGs

Right now, Next.js and Gatsby.js are at the forefront of React-based SSGs. The choice of which one to use depends on the specific needs of your project. Both frameworks provide excellent performance, but they have different approaches to achieving it. In general, Next.js uses server-side rendering and automatic code splitting, while Gatsby.js generates static HTML files at build time.

Next.js

Without a doubt, Next.js is one of the most popular static site generators (as per Jamstack_conf annual survey), and with good reason. It offers one of the best developer experiences delivering all the features you need for production.

Next.js is one of the most popular static site generators.

Some of the features include:

  • Server-side rendering (SSR): Next.js enables you to render your web application on the server, which makes it faster and more SEO-friendly. But it also supports CSR in case you need it.
  • Automatic code splitting: Next.js automatically splits your code into smaller chunks, which helps to reduce the initial load time of your web application.
  • Built-in API routes: Next.js provides a built-in API route that enables you to create API endpoints for your web application without the need for an external server.
  • Incremental Static Generation (ISG): With ISG, you can pre-generate static pages at build time and then incrementally generate them on-demand at runtime.
  • Image optimization: Built-in image component and automatic image optimization.
  • Edge and Node.js Runtimes: i.e., two server runtimes where you can render parts of your application code.
  • TypeScript support: Automatic TypeScript configuration.
  • Next.js is highly scalable: which is particularly important in eCommerce, where sites need to handle large volumes of traffic and transactions.

It is relatively easy to learn. In case you are stuck, they have a vibrant Discord community.

To get going with Next, you’ll need to fill out the requirements: having Node.js and npm (or npx) installed. When that’s done, it’s time to create your app through create-next-app or manually. Thankfully, Next.js has provided extensive documentation that will get you up and running in no time.

Finally, Next.js also comes with the added value of Vercel, a platform for frontend frameworks and static sites designed to integrate with headless content, commerce, or database. Vercel lets you develop, preview, and ship every Next.js feature without configuration.

The flip side of it is that not using the Next + Vercel combo can complicate things much more.

⚙️Next.JS for eCommerce Boilerplates.

Thanks to its hybrid rendering capabilities and easy integration with APIs, Next JS is a powerful tool for creating fast, scalable, and dynamic eCommerce sites.

Get a head start with one of our open-source Next JS eCommerce boilerplates and set up a store in just a couple of minutes.

Gatsby JS

Gatsby is a React-based, open-source framework that aims at helping you build blazing-fast static web applications by integrating different content, APIs, and services seamlessly into one web experience via their unified GraphQL data layer.

Gatsby is a React-based, open-source framework.

Gatsby also brags content mesh, the modern headless CMS architecture, with Gatsby managing all the web app components.

On top of that, they offer the Gatsby Cloud platform designed for building, previewing, and deploying Gatsby websites in real-time on a global Edge network. It covers the continuous integration and continuous delivery (CI/CD) part of the architecture.

If you don’t consider yourself an expert in web development, you’ll be happy to know that Gatsby offers step-by-step tutorials on getting started. Intermediate or advanced developers can start by creating their Gatsby website and setting everything up locally before deploying on Gatsby Cloud or via another solution of their choice.

In January 2023, Nerlify announced the acquisition of Gatsby. While still early to say what that means for Gatsby (and Netlify), we are hopeful this move will only spark and inspire other market players to evolve for the better of the users.

⚙️Gatsby eCommerce Starters.

Static site generation, GraphQL data layer, rich plugin ecosystem, and support for Progressive Web Apps (PWA) make Gatsby a powerful tool for creating performant storefronts.

Just as you can start a storefront with Next JS, we offer an easy way to set up a Gatsby eCommerce with a couple of open-source starters.

The Other React SSGs

Now, let’s look at what else is there in the React static site generators space.

Docusaurus

Docusaurus is a static site generator that helps you build optimized websites quickly, focused on your content, which often consists of open-source software documentation.

It’s built on React and powered by Markdown, supports localization, versioning, and content search out-of-the-box, as well as a variety of integrations.

React Static

React Static is a powerful, lightweight, and fast progressive static site generator for React.

It was designed with the user and developer experience in mind, built for SEO, supports the entire React ecosystem, and comes with great features right out of the box.

Its simple setup and migration and the fact that it is data agnostic make it one of the favorites among developers.

UmiJS

UmiJS is an extensible enterprise-level front-end application framework based on React.

UmiJS is highly extensible, with support for various plugins and function extensions, letting you cover the complete lifecycle.

It’s very popular among enterprises because it’s easily scalable and customizable. It supports both configuration and conventional routing with functional completeness, such as dynamic routing, nested routing, permission routing, and more.

What Now? Which React-based SSG Is for You?

It won’t be anything new with us saying it depends on your business goals, the website you are making, and team proficiency, right? But it is true.

For example, Docusaurus is built with docs in mind, but it is a good option for small websites as much as other newcomers. Both Gatsby and Next JS work great on almost any project, no matter the size, and we’re emphasizing size here.

While it is true, SSGs might have problems generating tens of thousands of pages whenever you make a change. Gatsby and Next solve this by offering solutions in the form of incremental builds.

Not sure which one would be the best fit for your project? We can help.

START building for FREE with Crystallize, or schedule a 1-on-1 demo so we can show you how you can utilize the power of headless commerce and static site generators on your next project.

You Should Also Read👇

Frontend Frameworks in 2022 for eCommerce

Frontend Frameworks in 2022 for eCommerce

The frontend frameworks ecosystem is booming so much that finding the right one for your online business/store has become challenging (at best). We’d love to help. This post is all about that.

Gatsby Vs. Next JS

Gatsby Vs. Next JS

Next.js vs Gatsby, what to choose? This is an age-old question many developers have to ask whenever they start a new React application.

Practical Guide to Web Rendering

Practical Guide to Web Rendering

Server-Side Rendering. Client-Side Rendering. CSR with Prerendering, etc. The differences, trade-offs, and similarities between most common web rendering solutions and why you should care about them as a dev.