More and more web developers are looking to get started with the modern web development approach. With this comes the never-ending search for the best static site generators (SSGs).
Architectures like Jamstack offer many options and aren't prescriptive about the tools you should choose. One of the leading factors developers have in mind when selecting their stack is the ability to build fast web pages.
To achieve fast loading speed, you had to say goodbye to dynamic content. Nowadays, you can build a static site with dynamic content. With the rise of Jamstack, many static site generators have emerged, but choosing one might be a task on its own.
In this article, we’ll explore the best SSGs to use in 2022, but first, let’s explore what they are.
Here’s what we’ll cover:
What is a Static Site Generator (SSG)?
A static website generator is a simple markup that uses a language like Markdown or HTML, data (in JSON, YAML, or TOML format), and templates. It combines them with tools like Handlebars, Liquid, or Nunjucks to generate the pages of a website.
This is similar to any dynamic web programming language like PHP, for example, but the key difference is that this is done at build time rather than on the server in response to each page request. This is why we call them static site generators since the assets they create (i.e., the ones we will deploy) are all static.
There are two broad types of modern static site generators.
What is a static site?
One key difference between static and dynamic websites is that, with the static site, the data served to the client will always be the same.
Should you use a static site generator?
If speed and reliability are your primary concerns, you should use a static site generator. However, if you’re building a highly dynamic website that needs to display almost real-time updates, then a static website is probably not your best option.
With that being said, here are the advantages of using an SSG:
By default, static assets are faster than server-rendered assets because there is no application server involved in generating pages and no database. Add to that the fact that static assets can be served on the edge via a CDN rather than a traditional web server, and you have all the ingredients for a speedy and SEO-optimized site.
Security and reliability
No site is perfectly secure, but static assets offer very few attack vectors. There is no database to hack and no application server to compromise. By running at the edge on a CDN, there isn't even a single web server one could gain access to.
Static sites don't go down like traditional server-side applications. There's no database connection to fail and no runtime error on the server. Even if a new build fails, the site remains up with the prior assets. If your site sees a sudden rush of traffic, static assets scale by default.
Static websites can be incredibly dynamic by leveraging APIs and services both at build time and on the client-side to accomplish nearly anything a server-side application can.
By default, static site generators are all about dynamic content. This is literally what they were created for, just at build time rather than run time. This content can come from file-based data in JSON, YAML, or Markdown, but it can also come from an API.
Here are examples of services available for various dynamic features:
AWS Lambda & Azure functions for backend functions
Netlify for identity, forms, and backend functions
Auth0 for identity
Algolia for search
Snipcart for e-commerce
Staticman for user-generated content
Here’s a list of the services available.
Using a static site generator is a more cost-effective way of building a website. Since you’re serving static assets to your clients, you don’t need to maintain an expensive database. In addition, hosting a static site is normally really inexpensive or even free with options like Vercel and Netlify.
The best static site generators in 2022
Calling Next.js a static site generator is a bit misleading. Next.js is a React-based web framework that can be used for building completely server-side web applications rendered (SSR), statically pre-rendered (i.e., SSG), or even hybrid SSG/SSR applications. Next.js offers a variety of built-in tools for routing, state, code-splitting, and more that make it easier to build a React SPA.
Throughout 2020, the features in Next.js around both the SSG and hybrid SSG/SSR expanded considerably. This began with several 9.x releases that culminated in the release of Next.js 10. The latest release, Next 12, comes with faster builds and refreshes thanks to the new Rust compiler. It also introduced Middleware, enabling you to change the response to a client request before it is completed.
Next.js emphasis on hybrid SSG/SSR applications is also driving a debate in the Jamstack community over what defines Jamstack. Even Vercel, the company behind Next.js, has decidedly moved away from the Jamstack term. And their competitor Netlify now offers the ability to run hybrid SSG/SSR apps via their next-on-netlify plugin.
As the name might imply, Nuxt.js has a lot of similarities to Next.js, with the glaring difference being that it uses Vue instead of React. For similar reasons as Next.js, it would also be misleading to refer to it as purely a static site generator as Nuxt can function as either an SSR framework for building SPAs or as an SSG. In the past years, Nuxt.js made some significant improvements to its SSG offering. They introduced full static mode, which allows you to target an entire site as static and adds build and payload improvements aimed explicitly at static apps.
Building upon those improvements, Nuxt also improved its static build time by allowing builds to be generated off a build cache only when content has changed. This can yield dramatic decreases in build times wherever you deploy your app.
Nuxt.js 3 is currently in beta and scheduled for release in June 2022. This version will take advantage of Vue 3 and come in a lighter package, an optimized cold start with dynamic code-splitting, a new bundler called Vite, and hybrid SSG/SSR to compete with Next.js.
One of Gatsby's biggest complaints was the build times, something they have worked hard to address this past year by launching incremental builds. This feature is supported on Gatsby's own Gatsby Cloud offering and via services like Netlify, and it can reduce build times to mere seconds in many cases. Their recent release also supports server-side rendering.
Gatsby has always been an entry point into the Jamstack for new developers. They continued to enhance features for new developers, including the launch of Gatsby Recipes, which are prebuilt solutions for common problems. These offer both the code and provision the necessary resources for you. As you might expect, this also includes the ability for the community to contribute their own recipes.
As with any traditional SSG, the lack of a prescriptive framework doesn't mean that you can't leverage one. For example, you can leverage the aspects of a framework without requiring using one on the frontend. Netlify did so in their Netlify.com redesign that used Vue components in Eleventy at build time.
11ty also released a plugin for SSR and deferred rendering named Eleventy Serverless. It’s also worth noting that Netlify is now supporting Zach Leatherman to work full-time on the SSG.
Hugo is a "traditional" open-source SSG built-in Go created back in 2013. By traditional, I mean that, like Eleventy, it focuses on providing the tools to generate full static sites without any prescription on how they are built (i.e., no frontend framework). Hugo's biggest differentiator has always been its build time. Being built in Go means that Hugo is incredibly fast, often completing milliseconds.
Jekyll is a Ruby-based static site generator that popularized the entire concept of an SSG. GitHub co-founder Tom Preston-Werner originally created it in 2008. It gained a lot of popularity in part by being supported in GitHub Pages, which ran Jekyll's build process when a change was checked into GitHub - a process that has since become pretty much standard. Jekyll is a "traditional" SSG like Hugo and Eleventy. While it can create just about any kind of site, it continues to be more "blog-centric" by making it extremely easy to launch a static blog.
Jekyll 4.0, released in 2019, addressed the issue of long build times in Jekyll. They’ve not released any major version since, but they’re continually releasing bug fixes to improve the tool.
Emerging SSGs to consider
Just like Next.js, it would be misleading to call SvelteKit an SSG. This framework uses Svelte to build fast apps and focus on progressive enhancement and the initial load experience.
Bridgetown started as a fork of Jekyll that aims to bring modern web development tools and practices like the use of Webpack, PostCSS, and npm. They’ve just released their v1.
VuePress is another Vue-based static website generator that is built by the Vue.js team itself. It aims for a minimal setup time and focuses on Markdown content.
Scully was the first Angular-based SSG when it was released in late 2019. It focuses on making building, testing, and deploying apps extremely easy.
There are no hard and fast rules for picking an SSG. It really depends upon the personal preference of you and your development team.
However, a few questions might help with your final choice:
Do you require a hybrid statically rendered and server-side rendered (SSR) site?
Do you want to use a prescribed frontend framework?
How important is build time?
What type of project are you creating?
Is the language you’ll be using important to you?
The good news is that there are solutions that can fit just about any preference. It's incredibly easy to get started. You can typically build an entire example site from scratch in an afternoon and get a good feel for how a specific SSG works.
Let me know in the comments if you have tried any of these SSGs and what are your thoughts about them.