SSG pre-renders pages at build time. The resulting HTML is stored and served instantly from a CDN for every user.
Interactive Simulation Engine
SSG: Build-Time Optimization
Generate once, serve millions of times
Data & Components
(Build Time)
(Build Time)
Static CDN Cache
(Global Storage)
(Global Storage)
User Browser
(Instant delivery)
(Instant delivery)
Start by running the Build process to pre-generate your site.
Executable Code Workbench
page.tsx
Live Code Editor1// Default behavior in App Router
2export default async function Page() {
3 const res = await fetch('https://api.example.com/posts')
4 const posts = await res.json()
5
6 return (
7 <ul>
8 {posts.map(post => <li key={post.id}>{post.title}</li>)}
9 </ul>
10 )
11}Mental Model
Like a pre-packaged snack. It's already made and ready on the shelf. You don't have to wait for anyone to cook it.
Why This Exists
For performance and cost. Serving a static file is the fastest possible way to deliver a page and requires minimal server resources.
Critical Note
"Static pages are boring. No! Static pages can still be highly interactive once they 'hydrate' on the client."