Kyle Meagher
January 21, 2021
If you aren’t using or experimenting with static sites, it’s time to jump (back) onboard.
Static content is the future.
Given the shift away from static sites to their more dynamic counterparts, this might have seemed far-fetched not long ago. However, new methods for building websites - like Jamstack - have grown in popularity, and static sites are in the middle of a renaissance.
Quick Links:
- What's a Static Site Generator?
- What is a Static Website?
- Why are SSG's becoming so popular?
- The Benefits of a SSG
- How do SSG's work?
- SSG's and Headless CMS
- Get Started with a Static Site Generator
How does Static Site Generation work?
Previously, static sites only had a limited number of use cases; those included mostly microsites and landing pages. While developers still rely on them for these purposes, there are also a host of new applications thanks to advancements in web architecture.
A key component for bringing static sites to life is what is known as a static site generator.
In this article, we’ll delve into static site generators, explain how they work, their benefits, and illustrate how to combine them with a headless CMS for best results.
What is a Static Site Generator (SSG)?
As its name suggests, a static site generator (SSG) is quite literally used to build static sites.
A static site generator creates a fully static site from a set of HTML files and deploys it to an HTTP server.
An SSG doesn’t require a database or server-side rendering for execution like a traditional CMS does. Instead, content in the form of text-based files is compiled into HTML pages with the help of templates. Then the site is rendered and uploaded to a CDN, typically a global one, so content can be delivered to visitors anywhere in the world, fast.
SSGs can eliminate some of the issues which can occur when using a traditional CMS to deliver these smaller websites. Traditional CMS platforms have been around for some time, and while they are still prevalent today, the main benefit comes from working with dynamic content.
What is a Static Site?
In the past, most web development was done using static sites. A static site consists of HTML, CSS and frontend JavaScript. Pages on a static site can run dynamically, but they’re not generated on the server. Instead, files are pre-rendered and pre-built, then hosted on the server. They don’t change with every user request.
Each page on a static site is a separate file. In the past, if a static website needed to be updated, each page needed to be updated separately. For instance, if you wanted to update the footer on a website you built, each page would have to be updated individually.
During the early days of the internet, this was how most of the websites were created, until dynamic sites burst onto the scene.
When a user visits a dynamic site, the site is rendered dynamically on the server, enabling the server to build pages on the fly. This made it easier to publish changes to websites, as well as update content. Using our footer example, with dynamic sites you can update the footer once and those changes are then applied to the footer on all pages.
The modern web supports dynamic sites because of the plethora of front-end frameworks available. Dynamic sites are handy for their personalization and omnichannel features, but, can become complex to manage, hard to scale, and the costs of maintaining this type of website will add up.
Why Are Static Site Generators So Popular?
Static site generators are growing in popularity, as static sites see a comeback. Advancements in web technology over the past decade allow developers to decouple the server (or a serverless back-end) from the front-end. Today developers of web apps can have the speed of the lightweight static website on the front-end, and the flexibility of dynamic websites on the back-end, by using static site generators.
Modern enterprises favor using SSGs for performance and security, whereas solo developers enjoy design freedom and development simplicity. Furthermore, there are a wealth of SSG options available to serve every use case. We'll examine a few in a minute.
Let's take a closer look at the benefits of using an SSG for your next project.
Benefits of Static Site Generators
Security
Traditional CMS platforms are quite susceptible to hacks such as SQL injections and more attacking the holes in a server-side database. SSGs don’t have this database, and display the page a user requests, removing the possibility of a hack.
Scalability
Because SSGs are designed such that each page is ready to go upon request from the CDN, the drawback of server-response times is gone. Additionally, less computing power is required to respond to additional requests, making it far easier for the site to handle additional traffic. The result is near-infinite scalability.
Speed
Speed is one of the primary benefits of an SSG - again, thanks to the CDN. The precompiled files can be served directly to browsers, and with lower overall latency when served via a global CDN.
- Precompiled files = elimination of server-response time.
- Closer to the request (via global CDN) = faster response time.
These two factors work together to dramatically cut user load times.
Ease of Use and Flexibility
Without the templates and page builders of a traditional CMS, which were nearly required traditional dynamic websites, through SSG's and a decoupled CMS, developers have much more freedom to design and create.
How Do Static Site Generators Work?
The general procedure of static site generation is actually a simple process. At build time, before the content reaches a CDN, a static site generator or framework reads content from files; usually, this content comes in a format such as markup.
Content then gets rendered to HTML based on templates and served to the CDN.
Finally, the results are saved in a directory and laid out to match the source files and keep them available when requests to view the content are made.
This simplicity is the basis for the benefits of using an SSG, the features are very limited. Enterprises especially need the flexibility to deploy either static sites or dynamic sites depending on the use cases. For some of those use cases, an SSG can be combined with a headless CMS for best results.
The Drawbacks of SSGs
The way that SSGs turn data into easily deployable static sites can be appealing for many companies. However, the feature limits of an SSG mean that marketers are limited and don’t have the capabilities to deliver omnichannel content.
Static site generators are great for developers, but marketers and content creation team members can struggle with the more technical aspects. They often don’t provide the out-of-the-box workflows that enable valuable collaboration and input from a team. However, there is a way around these challenges.
Integrating SSGs with a Headless CMS
Static site generators can be connected to a headless CMS with the help of APIs. Instead of the tightly coupled approach that traditional CMS platforms rely on, a headless CMS removes the frontend presentation layer and instead connects to multiple frontends using APIs. One of those multiple frontends can be a static site generator. This allows you to generate a fast and flexible frontend for your content needs.
The result is vast possibilities for SSGs: through headless cms, they can easily be used for various use cases including blogging, microsites or landing pages, documentation, and even more advanced use cases such as marketing sites and eCommerce stores.
Getting the most out of your SSG will depend on what you need to use it for, so it's crucial you pick the right static site generator for that use case.
Examples of Static Site Generators
Next.js
Next.js is a lightweight React framework that can be used to generate static sites as well as do server-side rendering. Because it's created by the Vercel team, Next.js provides a great developer experience no matter what type of site you want to build.
Features: Great for building both static and dynamic sites. Versatility in how you can fetch data. The team at Vercel has put a lot of thought into the Next.js framework, creating features like Incremental Static Generation to reduce pre-rendering time.
Drawbacks: Requires server-side knowledge from developers and can be more challenging that other SSGs.
Best For: Enterprises that need to generate static sites for multiple use cases.
Jekyll
Jekyll is a Ruby-built static site generator that lets you focus on content. Jekyll is a known entity among SSGs but hasn’t added as many features as others on the list.
Features: Simple and blog-aware (permalinks, pages, posts and layouts all available for use). Also includes free hosting on GitHub pages.
Drawbacks: There is a slow build. It will take a long time to generate larger sites, and there are limited built-in features.
Best For: Smaller websites and personal portfolios.
Gatsby
Gatsby is an open source React-based framework for creating blazing fast websites and apps. It features plenty of plugins and can integrate using APIs.
Features: Static progressive web app (PWA) generator. Ideal not just for static websites but apps that load quickly and are also available offline. Also includes a rich library of plugins.
Drawbacks: Not ideal for sites with large volumes of content.
Best Use Cases: Perfect for small and medium-sized businesses.
Cosmic Combines With Static Site Generators for Blazing Fast Results
As static sites surge to the leading-edge of modern web development, static site generators make the build of these sites a walk in the park for developers. Enterprises and complex applications will need the right architecture to handle their content to fully utilize static site generation.
Cosmic provides a flexible headless CMS architecture that is perfect for plugging into any static site generator. With Cosmic, it's easy to manage content by yourself or with teams.
Use APIs to combine with all of the latest-and-greatest static site generators to generate static sites and other content applications.
For more information, check out our collection of Gatsby resources or Next.js Resources.
Or, start building right now with our quick-start guides:
