What Are Static Site Generators? Definition and Key Traits
Static site generators pre-build HTML at deploy time. Learn how SSGs work, where they beat SSR/SPAs, and how Astro, Hugo, Next.js, and 11ty compare.
What Static Site Generators Actually Do
A static site generator (SSG) converts templates and content into plain HTML files at build time—before deployment, not when a user visits. The result: HTML files served directly from a CDN with no server-side processing per request.
The practical difference:
| Approach | How It Works | Response Time | Server Cost |
|---|---|---|---|
| WordPress/PHP | Generate HTML on each request | 200-800ms | $20-100+/month |
| SSG | Pre-build HTML at deploy | 10-50ms | $0 (static hosting) |
| SSR (Next.js) | Hybrid: some pre-built, some on-demand | 50-200ms | $10-50/month |
How SSGs Work (Under the Hood)
Content (Markdown/MDX) + Templates (HTML/JSX) + Data (JSON/API)
↓
[Build Process]
↓
Static HTML + CSS + JS
↓
Deploy to CDN (Cloudflare, Vercel, Netlify)- Content authoring: Write in Markdown, MDX, or fetch from a headless CMS (Contentful, Sanity, Strapi)
- Template processing: SSG combines content with templates (React, Vue, HTML)
- Asset optimization: Images compressed, CSS/JS minified
- Static output: HTML files ready for CDN deployment
SSG Comparison: Which One to Choose
| SSG | Language | Best For | Build Speed (1000 pages) | Learning Curve |
|---|---|---|---|---|
| Astro | JS/TS | Marketing sites, blogs | ~30s | Low |
| Next.js | React | Apps with SSR needs | ~60s | Medium |
| Hugo | Go | Documentation, large sites | ~5s | Medium |
| 11ty | JS | Simple sites, full control | ~20s | Low |
| Gatsby | React | Content-heavy, CMS integration | ~120s | High |
| SvelteKit | Svelte | Performance-critical | ~25s | Medium |
Astro: Best for Marketing Sites
Zero JavaScript by default. Ship only what’s needed via “islands architecture.” Excellent for SEO-focused marketing sites where most content is static.
Next.js: Best for Hybrid Applications
Supports static generation (SSG), server-side rendering (SSR), and incremental static regeneration (ISR). Choose Next.js when you need both static pages and dynamic server-rendered routes.
Hugo: Fastest Build Times
Written in Go, Hugo builds thousands of pages in seconds. Ideal for documentation sites, blogs with 10,000+ posts, or any site where build time matters.
11ty: Maximum Flexibility
Minimal opinions, maximum control. Use any template language (Nunjucks, Liquid, Handlebars). Great for developers who want to understand every line of output.
Why SSGs Beat Traditional CMS
| Benefit | Technical Reason | Business Impact |
|---|---|---|
| Speed | No database queries, direct CDN serving | Better Core Web Vitals, SEO |
| Security | No server-side code to exploit | No SQL injection, XSS via server |
| Cost | Static hosting is free or cheap | $0 vs $20-100+/month |
| Scalability | CDN handles traffic spikes | No server crashes during launches |
| Developer Experience | Version control for content, local preview | Faster development cycles |
When NOT to Use an SSG
SSGs aren’t ideal for:
- Real-time content: Stock prices, live scores (use SSR or client-side updates)
- User-generated content at scale: Comments, forums (need database)
- Highly personalized pages: Dashboard with user-specific data (use SSR)
- Frequent content updates by non-developers: Unless paired with headless CMS
Getting Started
For marketing sites and blogs: Start with Astro. Zero JS default, excellent performance, low learning curve.
npm create astro@latestFor apps with dynamic features: Start with Next.js. Industry standard, extensive documentation, Vercel integration.
npx create-next-app@latestFor documentation with fast builds: Start with Hugo. Sub-second builds even at scale.
brew install hugo
hugo new site mysite