Static Site Generation (SSG)

Pages are pre-built at build time for maximum performance. Best suited for Blogs, Docs, and Marketing sites with content that doesn't change frequently.

Build Time

Fetch data at build time
React.renderToStaticMarkup()
Store HTML on CDN

Runtime

🌐
Request
Response
🖥️
CDN serves static HTML

Client

Client sends request
Client receives HTML
React.hydrate()
✨Page interactive
Benefits x Trade-offs

Benefits

  • •Maximum Performance: Fastest possible loading
  • •CDN Distribution: Global content delivery
  • •Cost Effective: Minimal server resources needed
  • •Security: No server-side vulnerabilities

Trade-offs

  • •Stale data: Content only updates on rebuild
  • •Long build times: All pages generated at build
  • •No dynamic content: Can't personalize per user
  • •Rebuild required: Changes need new deployment
How to implement?

SSG uses async Server Components pre-rendered at build time. For dynamic routes like [id], use generateStaticParams() to generate all static pages at build.

// app/posts/[id]/page.tsx
export async function generateStaticParams() {
  return fetch('https://api.example.com/posts').then(res => res.json());
}

export default async function PostPage({ params }: { params: Promise<{ id: string }> }) {
  const { id } = await params;
  const post = await fetch(`https://api.example.com/posts/${id}`).then(res => res.json());
  return <article>{post.content}</article>;
}
  • •Components are async functions (no 'use client' directive)
  • •Cannot use React hooks (useState, useEffect, etc.)
  • •Use 'cache: "force-cache"' in fetch for static data
  • •Pages are generated at build time, not on request