Posts
  /  
Webdev
~
Mar 01, 2023
~
min read

What is Static Site Generation (SSG)?

Nowadays, what do we mean when we're talking about SSG?
Woman (Marguerite) taking a selfie in the mirror, phone in hand, wearing a RHCP shirt.

Marguerite Whitford

Senior Product Engineer @Parse.ly

What is static site generation?

In modern

Jamstack
architecture, Static Site Generation (SSG) is a technique that is used to generate HTML pages during the build process, rather than rendering them dynamically at runtime. This approach involves generating the HTML, CSS, and JavaScript for a site in advance and serving them directly to the client, instead of generating them on-the-fly through a server-side script.

SSG has become increasingly popular in Jamstack development due to its numerous benefits, including faster page loading times, improved security, and reduced server load. By generating HTML files in advance, SSG eliminates the need for server-side processing, resulting in a much faster loading website.

To implement SSG, a developer creates templates for each page of a website, which are then used by a static site generator (such as Gatsby or Hugo) to create a set of HTML files. These files are then deployed to a server or a content delivery network (CDN) for distribution.

One of the key advantages of using SSG in Jamstack development is that it allows for easy integration with modern front-end frameworks like React, Vue, and Angular. These frameworks can be used to create reusable components for building complex web applications. As a result, developers can take advantage of the benefits of a static site (such as speed and security) while still building dynamic, interactive sites.

Search engine optimization (SEO)

Maybe one of the most important benefits of static site generation —

SEO
. Because pages are pre generated, search engines can crawl and index content more easily and efficiently, resulting in better search rankings and visibility. Compared to a standard progressive framework, when pages are created when a route is visited by a user (“created dynamically at runtime”).

Gatsby: A React-based SSG that is known for its flexibility and ease of use. It offers a wide range of plugins that enable developers to build complex websites quickly and efficiently. Recently acquired by Netlify in 2023.

Next.js: A React-based SSG that is designed for building server-rendered applications. It offers a wide range of features such as automatic code splitting, client-side routing, and static exports.

Hugo: A fast and flexible SSG that is designed for building static sites. It is written in Go.

Jekyll: One of the oldest site generators, Jekyll is simple and popular Ruby option. It’s known for its ease of use and is widely used for blogging and small websites.

VuePress: A Vue-based SSG, used mostly for building documentation websites. It offers a wide range of features such as custom theming, Markdown support, and live-reload. A downside is that many of the sites tend to look the same (though fun to spot in the wild — I love Vue!).

This site and build! I’ve been working on this Vue and Vite SSG, which utilizes markdown files over a

CMS
, and of course — has some build in d3. Stay tuned for this updated list.