Next.js SEO · Part 6 · SSG vs. SSR
Static site generation vs. server-side rendering
When the server creates a page's HTML, ahead of time or on each request, when each approach fits, and how it relates to Next.js.
Part 5 showed that the server can send HTML containing the actual page content. That raises another question.
What a build is
Imagine a website with 20 JavaScript tutorials. Before publishing it, a command prepares it for deployment. That preparation is called a build.
A build can turn source code into files ready to be served to visitors. For example, it might generate an HTML file for each tutorial page.
Static site generation (SSG)
With SSG, the website generates HTML ahead of time, often during the build.
1.How SSG works
Imagine the website has a page at /tutorials/javascript. During the build, the framework creates HTML like this:
<h1>JavaScript Tutorial</h1>
<p>Learn JavaScript step by step.</p>When someone visits the page, the server can send that already-generated HTML.
Build time
Generate the HTML once
Saved HTML
Ready to be served
Visitor A
Receives prepared HTML
Visitor B
Receives prepared HTML
SSG: generate first, serve later.
2.When SSG is useful
For pages whose content doesn't change often: tutorials, documentation, blog posts or an About page.
- Advantage: HTML can be served quickly, and the server doesn't need to regenerate the page for every request.
- Limitation: when the content changes, the page must be updated through a new build or a supported revalidation mechanism.
Server-side rendering (SSR)
With request-time SSR, HTML is generated when someone requests the page.
1.How SSR works
Imagine a website showing current train arrivals. When a visitor opens /train-arrivals, the server fetches the latest information and generates HTML for that request.
Visitor
Requests the page
Server
Generates HTML using information available for that request
Visitor
Receives the HTML
SSR: generate when requested.
2.When SSR is useful
For pages that need fresh or request-specific information, such as personalized dashboards or live availability.
- Advantage: the server can generate content using up-to-date information.
- Limitation: generating HTML for each request can take more server work than serving a page prepared ahead of time.
SSG and SSR compared
| SSG | Request-time SSR | |
|---|---|---|
| HTML generated | Ahead of time | When requested |
| Same prepared HTML reused | Usually yes | Not necessarily |
| Server work per request | Generally less | Generally more |
| Common example | Tutorial article | Personalized dashboard |
| HTML readable by crawlers | Yes | Yes |
| Guarantees high rankings | No | No |
How this relates to Next.js
The Next.js App Router supports both prerendered pages and dynamically rendered pages.
One important detail: Server Components don't automatically mean request-time SSR. A Server Component can be part of a page that is prerendered ahead of time, or one that is rendered dynamically.