Catalog
concept#Architecture#Software Engineering#DevOps#Platform

Static Site Generation (SSG)

SSG generates websites at build time as static files, optimizing load performance, security and simple delivery via CDNs.

Static Site Generation (SSG) is an architectural approach where pages are pre-rendered at build time into static HTML, CSS, and JavaScript assets.
Established
Medium

Classification

  • Medium
  • Technical
  • Architectural
  • Intermediate

Technical context

Headless CMS (e.g., Netlify CMS, Strapi)Content Delivery Networks (CDN)CI/CD platforms (GitHub Actions, GitLab CI)

Principles & goals

Pre-render at build timeSeparation of content and presentationCache-first delivery via CDN
Build
Domain, Team

Use cases & scenarios

Compromises

  • Static files can become stale if deploy processes fail
  • Complexity from hybrid approaches (SSG + client hydration)
  • Scaling builds can strain CI resources
  • Keep content versioned in Git and make builds reproducible
  • Optimize assets (images, CSS minification) in the build pipeline
  • Define clear cache invalidation and deploy strategies

I/O & resources

  • Content sources (Markdown, MDX, CMS export)
  • Template engines and layouts
  • Build tools and asset pipeline
  • Static HTML, CSS and JS artifacts
  • Sitemap, RSS feeds, asset manifests
  • Deployable bundles for CDN/hosting

Description

Static Site Generation (SSG) is an architectural approach where pages are pre-rendered at build time into static HTML, CSS, and JavaScript assets. This yields fast, cacheable and low-attack-surface deployments without runtime server rendering. SSG is well suited for documentation, marketing sites and blogs with largely stable content.

✔

  • High delivery performance via pre-rendered assets
  • Reduced attack surface without server-side rendering
  • Simple scalability and low-cost hosting

✖

  • Limited support for highly personalized content
  • Longer build times for very large sites
  • Requires additional solutions for dynamic features (e.g., search, auth)

  • Build time

    Total duration of a full build; affects release speed and CI costs.

  • Time to First Byte (TTFB)

    Measure of perceived load performance when first accessing a page.

  • Cache hit ratio

    Proportion of requests served directly from CDN/cache.

Hugo documentation

Documentation of an open-source project using Hugo to produce fast static pages.

Jekyll on GitHub Pages

Publishing personal and project sites using Jekyll and GitHub Pages as hosting workflow.

Gatsby marketing site

Marketing website combining SSG for SEO and performance with client-side hydration for interactive components.

1

Choose a suitable SSG tool (e.g., Hugo, Jekyll, Gatsby)

2

Set up templates, layouts and local build processes

3

Integrate into CI/CD, configure automated builds and deploys

4

Define and test CDN and cache strategy

⚠️ Technical debt & bottlenecks

  • Monolithic build scripts without modularization
  • Hardcoded CDN paths in templates
  • Missing automation for cache invalidation
build-timepersonalizationci-cd-resources
  • Using SSG for highly personalized dashboard applications
  • Relying on manual deploys due to build speed
  • Omitting cache invalidation after page updates
  • Not accounting for search index updates on content changes
  • Missing strategy for private or protected content
  • Underestimating build time as site grows
Frontend templating and HTML/CSSBuild tools and CI/CD configurationCDN and caching strategies
Performance and scalabilitySecurity and reducing attack surfaceOperational cost optimization
  • • Real-time data requires additional APIs or functions
  • • Large number of pages increases build and deploy effort
  • • Dependency on external services for dynamic content