What is a Static Site Generator?

Hero image for What is a Static Site Generator? Image by Daan Stevens.
Hero image for 'What is a Static Site Generator?' Image by Daan Stevens.

Static site generation has been around for a long while but has really become all the more popular alongside jamstack architecture and the advancement of JavaScript with libraries such as React.

I personally have been using Gatsby as one of my key development tools for a little while now: it's ideal for the types of highquality, lowmaintenance, longlasting sites I tend to build in my freelance capacity. The ability to connect this up to a fullfeatured CMS like Contentful or even a headless installation of WordPress really means that you would rarely need to use anything more.

I recently released Red Central on just this tech stack and thought it meant sense to write a little about what a static site generator actually is.


So: What is It?

Fundamentally, a static site generator is a piece of software which produces (or 'generates') a set of static HTML pages with their associated CSS, JavaScript, and assets, using one or more sources of data, transformed and combined with a developed library of components and templates.

This differs from a more conventional serverdriven setup where data is stored in a database, and a software layer fetches that data, combines it with templates, and then outputs that to the user, at the point of accessing the URL.

Photograph of a LEGO pilot character in the cockpit of their plane by Ivan Diaz on Unsplash.

What's the Difference?

I should preface this section by saying: there is no onesolutionfitsall in web development. Although I tend to find that the vast majority of my freelance projects are best suited to a static setup, there are plenty of situations where that isn't the case.

With that said, the key difference here is that when you visit a staticallygenerated site, it has already been generated and is simply sitting there ready to be transmitted to you, whereas a traditional system has a lot of latency in having to build the page up for you on the fly. So, static sites are by and large much faster.

When you release an update on a platform like Gatsby, a new build is kicked off; this collects together all the different data sources and creates a new version of the site. What this does mean, is that you don't get to see immediate changes on the site. Depending on the size of the site it could be several minutes before the build is completed, which may take a little bit of getting used to, although it is also possible to set up 'live' previews for static sites too.

By their very nature, static site generators greatly reduce complexity in the site itself which improves reliability and speed yet further. The big benefit though really is just how quickly and reliably your users can access the site.


Categories:

  1. Development
  2. Front‑End Development
  3. Gatsby
  4. Guides
  5. Node.js