React Based Static Site Generators in 2024
Gatsby might be out of the picture for many developers, but React and static site generators (SSGs) built on top of it are still gaining traction with front-end developers worldwide.
9 minutes
Often critiqued for NOT delivering on a promise of transforming front-end development, since its release in 2013, React JS has been under the fray of the dev world.
Last year's annual State of JS report on front-end frameworks and libraries survey showed interest may be falling, but React usage is growing (source link). Furthermore, insights from the Stack Overflow Developer Survey 2023 reinforce React's position in the ecosystem as the most loved web framework, with a notable percentage of developers either using it or expressing interest in using it shortly (source link).
While we wait on fresh stats, one could argue it is the framework of the web. Still, web development is an ever-changing beast. Yesterday's underdogs are today's hyped frameworks/libraries/approaches/architectures/concepts _________________(add anything here).
Not long ago, most businesses relied on monolithic solutions for content management (CMS) and eCommerce with coupled front and back end. That became a problem as new screens, markets, and channels emerged. The rise of headless architecture allowed businesses to think differently.
New technologies/frameworks significantly simplify the web development, management, and distribution processes while allowing for better reach, performance, and the web in general.
Why are we mentioning this here? Well, if you know React and are ready to take advantage of headless architecture in your blog or online store, all you'll need is a static site generator to get you going (so to speak).
A static site generator generates a website with entirely static HTML files, pre-built without any calls to the database or external data sources and server-side processing.
SSG takes Markdown files, HTML templates, or React components you give and generates static HTML, CSS, and JavaScript files that can be served directly from the server to users.
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.
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.
Static site generators bring many benefits by solving problems associated with dynamic websites.
Loading Speed
Unlike dynamic websites, which generate their pages in real-time, static site generators deliver a pre-built HTML file when 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 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.
Flexible and Scalable
Dynamic websites frequently encounter server overloads during traffic spikes. With static sites, that's no issue, making them incredibly easy to scale and serve as large a traffic spike as needed.
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. It is most often used for dynamic websites. However, you may have noticed that these websites no longer deliver on the speed promise.
That’s why it’s often used for static generation today, too.
React’s ability to enable pre-built HTML files that increase loading speed makes it a perfect framework for building an SSG. By allowing you to edit only one component file, React allows for a granular approach to making changes to your static website.
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.
Last year, Next.js and Gatsby.js were at the forefront of React-based SSGs. Since then, Gatsby’s support from maintainers and the community has dwindled. Right now, there are several React-based SSGs from which to choose. The most popular ones are Next.js and Astro. Others include Qwik, Waku, Gatsby, etc. All these frameworks provide excellent performance but take different approaches to achieving it. Take Next.js, for example. It uses server-side rendering and automatic code splitting, while Astro generates static HTML files at build time, similar to what Gatsby does.
The React Framework for the Web, Next.js offers one of the best developer experiences and delivers all the features you need for production.
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. However, it also supports CSR if you need it.
- Automatic code splitting: Next.js automatically splits your code into smaller chunks, which helps reduce your web application's initial load time.
- Built-in API routes: Next.js provides a built-in API route that enables you to create API endpoints for your web application without needing 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.
- Partial Prerendering Development: Next.js 14 introduced partial prerendering, aiming to enhance the user experience by ensuring that essential metadata like viewport, color scheme, and theme are sent with the initial page content.
- Next.js is highly scalable: which is particularly important in eCommerce, where sites must handle large traffic volumes and transactions.
These reflect Next.js's commitment to improving performance, developer experience, and flexibility in web development practices. It is relatively easy to learn; if you are stuck, they have a vibrant Discord community.
To get going with Next, you must complete the requirements: install Node.js and npm (or npx). When that's done, it's time to create your app manually or manually through create-next-app. Thankfully, Next.js has provided extensive documentation to quickly get you up and running.
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 databases. Vercel lets you develop, preview, and ship every Next.js feature without configuration.
The flip side is that not using the Next + Vercel combo can complicate things much more.
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 minutes.
If you have worked with JavaScript in the last few years, you have probably heard about Astro. It is a popular framework that comes with several powerful tools out of the box. Astro is HTML-first and ships with zero JS by default (you can customize this based on your needs, of course!).
Let’s discuss some prominent features of Astro:
- Islands: Astro divides up your UI into isolated components aptly named islands. These components render in isolation and add interactive elements to a page that would otherwise be static HTML. This results in an overall improvement in performance, as the page loads faster.
- SSG and SSR: Astro is not only a static site generator. It can also serve content on demand from a server. This choice is totally up to you. Based on the project/page, you can choose SSG, SSR, or a mix of both.
- Astro themes: To make it easier to start an Astro project, you get access to several themes built by other developers. You don’t need to start from scratch. The themes are categorized based on use cases and can be found on the Astro website.
- Integrations: To make the development process even smoother, a number of integrations are available developed by both the Astro team and involved developers. There are integrations for CSS, accessibility, adapters to deploy the project to different platforms, etc.
Come on, guys, another framework to learn?
What if I want to use the UI framework syntax I’m already familiar with😞Well, with Astro, you can do just that. It has integrations for several of your favorite UI libraries, including React, Svelte, Vue, and many more. Want to use more than one UI library? You can do that, too! Isn’t that cool?
Static site generation, island structure, rich integration system, and several resources to help you get started make Astro one of the best choices for developing a JS project.
As you can start a storefront with Next JS, we offer an easy way to set up Astro eCommerce with an open-source starter.
Qwik is another framework worth considering. The team behind Qwik is dedicated to ensuring that projects built using the frameworks are performant and extremely fast. It features zero hydration for instant-on interactivity, ensuring optimized speed for sub-second full-page loads even on mobile.
Qwik's design focuses on high performance, delivering pure HTML and incrementally loading JavaScript only as needed. It is a JSX-based framework, so it is easy to start if you have worked with React.
The docs include several integrations, courses, blogs, and videos to make it as easy as possible to get started with it.
Waku is a minimal React framework designed to accelerate the development process for developers working on small to medium-sized React projects. It is mainly aimed at startups and agencies focused on building marketing websites, light eCommerce stores, and web applications.
Waku stands out by exploring the core React Server Components (RSC) capabilities and offering RSC best practices independent of traditional static site generation (SSG) or server-side rendering (SSR), which are optional functionalities within the framework.
Despite its simplicity, a learning curve is still involved, especially for developers unfamiliar with React Server Components.
Docusaurus is an open-source static site generator that helps you build optimized websites quickly. It comes with a simple and intuitive setup process. Although it was purposely developed for building documentation websites, it is also customizable and flexible enough for bigger projects.
It’s built on React and powered by Markdown, supports localization, versioning, content search out-of-the-box, and various integrations.
Gatsby is a React-based, open-source framework that aims to help you build blazing-fast static web applications by seamlessly integrating different content, APIs, and services into one web experience via its unified GraphQL data layer.
In January 2023, Nerlify announced the acquisition of Gatsby. While there have been no significant movements/updates/changes since then, let’s not write off Gatsby just yet.
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 configuration and conventional routing with functional completeness, such as dynamic routing, nested routing, permission routing, and more.
It won’t be anything new to hear us say that 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 documents in mind, and Waku is a good option for small websites, as are others mentioned here. Astro and Next JS work great on almost any project, no matter the size, and we’re emphasizing size here.
React-based static site generators offer powerful solutions for building static sites with dynamic capabilities. However, they come with their own downsides or challenges, like learning curve, build times, hosting and infrastructure, dependency management, and dynamic data handling.
Despite these, React SSGs are a powerful choice for many projects, offering a blend of speed, scalability, and developer experience.
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👇
Hands-On Experience: eCommerce Store with Astro?
Astro🚀 has been a hot topic since its release in June 2022, especially because it is extremely fast. So it was a no-brainer to choose which framework we should go with next for our series of minimal eCommerce boilerplates titled ‘dounut’.
Hands On Experience: How to Build an eCommerce Store with Next.js?
But first, a background story to give you context. I didn't take the path most Computer Science students take once they graduate. At some point during my college career, while coding my brains out in Java, C++, and assembly, I decided that being a full-time developer was not for me.
To be fair, I hadn't known what to do with myself even before college. I’d always liked writing, but you couldn’t get paid for that. (Right?)
As the Internet became more popular, I’ve enjoyed building homemade websites in HTML+CSS, learned a great deal about how to use search engines, connected with people worldwide, and even bought books and Star Trek memorabilia off eBay.
Therefore, the elders in my life had nudged me toward Computer Science, saying I’d be sure to make a lot of money once I graduated. I’d started with programming classes in high school, then continued with that path into college. And while I kept up with my coursework, I was never all that into coding for coding’s sake. It wasn’t something I itched to do in or out of the classroom.
As a result, my career path has been colorful: tech support, technical training, business analysis, and project management. I once had a job helping developers who used my company’s SaaS and APIs to get up and running and troubleshoot their programming issues. But by far, my favorite thing to do has always been technical writing and documentation. I enjoyed writing articles for the company website, for the knowledge base, you name it.
It turned out I could get paid for writing. Who would’ve thunk it?
I like writing so much that I’ve done a fair bit of it outside work as well. It’s been mostly for myself and my own fun, but I was able to get some work self-published under a pen name.
Now I’m doing technical writing full-time. Although I enjoy every second of it and wouldn’t want things any other way, there’s no denying that my technical side has atrophied a bit. It's super-hard for a full-time developer to keep up with all the latest technological trends, never mind someone who isn’t constantly immersed in it.
So, every once in a while, I like to dip my toes back into that water to learn what’s going on. It helps me to write better documentation when I know firsthand what’s important from the developer’s perspective.
On one occasion, I wanted to see if I could deploy one of the Crystallize boilerplates myself. And if I wanted to later on, I could eventually customize the boilerplate to sell my short stories and novels without having to rely on the big A or the big G.
What follows is a nice bit of hands-on experience. How easy or hard was it for a beginner like me to pull off?
Hands-On Experience: How to Build an eCommerce Store with SvelteKit?
Do you want to build an eCommerce storefront using SvelteKit, Houdini, Tailwind, and with product information from the Crystallize GraphQL API? Well, look no further. We have created an open-source boilerplate that connects the dots for this stack.