Understanding Static Site Generation
Why pre-rendering pages at build time is making a comeback
3×
Faster TTFB
Compared to server-rendered pages on average
100%
Build once
Pages served directly from a CDN edge node
95+
SEO score
Typical Lighthouse score for SSG pages
Basics
What is static site generation?
Static site generation (SSG) is a rendering strategy where HTML pages are generated at build time rather than on each request. The resulting files are plain HTML, CSS, and JavaScript that can be served from any CDN.
Unlike server-side rendering, where every request triggers a render on the server, SSG does the heavy lifting once. The output is a set of static files that load almost instantly for the end user.
- Pages are generated once at build time
- No server required at runtime — just a CDN
- Ideal for content that doesn't change on every request
How SSG works in Next.js
In Next.js, any page that exports a generateStaticParams function will be statically generated. At build time, Next.js calls your data-fetching logic, renders the page to HTML, and writes the result to disk.
These pre-rendered pages are then deployed to a CDN. When a user requests a page, the CDN serves the static file directly — no server-side computation needed.
- Define your routes with
generateStaticParams - Fetch data at build time, not at request time
- Deploy the output to any static hosting provider
- Optionally use Incremental Static Regeneration to update pages without a full rebuild
When to choose SSG over SSR
SSG is the right choice when your content changes infrequently and can be pre-built. Blog posts, documentation, marketing pages, and product catalogs are all great candidates.
If your content changes on every request — personalised dashboards, real-time feeds — server-side rendering or client-side fetching is a better fit. The key question is: can this page be the same for every visitor?
Action checklist
Identify static content
Audit your pages and flag those that can be pre-rendered.
Set up generateStaticParams
Export the function from each page that should be statically generated.
Configure your build pipeline
Ensure your CI/CD pipeline triggers a rebuild when content changes.
Key takeaways
- SSG generates pages at build time for near-instant load times.
- It is ideal for content that doesn't change on every request.
- Next.js makes SSG straightforward with generateStaticParams.
- Pair SSG with a scheduled rebuild for content that updates on a known cadence.