Static Site Generation
A web building approach where HTML pages are pre-generated at build time rather than on each request.
Also known as: SSG, Static Generation
Category: Techniques
Tags: web-development, rendering, performance, jamstack, frontend
Explanation
Static Site Generation (SSG) is a web development approach where all HTML pages are generated during the build process, before deployment, rather than being created dynamically for each user request.
How It Works:
1. Developer creates content and templates
2. Build process runs at deployment
3. All pages are generated as static HTML files
4. Files are deployed to CDN or static hosting
5. Users receive pre-built HTML instantly
6. Optional: JavaScript adds interactivity (hydration)
Advantages:
- Performance: Pages load extremely fast (no server processing)
- Scalability: CDN distribution handles any traffic level
- Security: No server-side code to exploit
- Cost: Hosting is cheap or free (Netlify, Vercel, GitHub Pages)
- Reliability: No database or server to fail
- SEO: Full HTML available for crawlers
Disadvantages:
- Build time: Large sites can take long to build
- Dynamic content: Not suitable for frequently changing data
- User-specific content: Challenges with personalization
- Preview: Content changes require rebuilding
Best For:
- Blogs and documentation
- Marketing websites
- Portfolio sites
- Content-heavy sites with infrequent updates
Popular SSG Tools:
- Next.js, Gatsby (React)
- Nuxt.js (Vue)
- Hugo, Jekyll, Eleventy (Template-based)
- Astro (Multiple frameworks)
Hybrid Approaches:
- ISR (Incremental Static Regeneration): Rebuild specific pages on demand
- SSR + SSG: Static for most, dynamic for some pages
Related Concepts
← Back to all concepts