What is SSG (Static Site Generation) in Next.js?

Static Site Generation (SSG) pre-renders pages to HTML at build time. The generated HTML is served from a CDN — ultra-fast with no server processing per request. Pages Router SSG: export async function getStaticProps() { const posts = await fetchPosts(); return { props: { posts } }; } export default function Blog({ posts }) { return <ul>{posts.map(p => <li key={p.id}>{p.title}</li>)}</ul>; }. For dynamic routes, export getStaticPaths to tell Next.js which paths to pre-build: export async function getStaticPaths() { const posts = await fetchPosts(); return { paths: posts.map(p => ({ params: { id: p.id } })), fallback: "blocking" }; }. App Router SSG: Server Components that fetch data without dynamic/revalidate options are statically rendered at build time by default. fetch("https://api/posts") in a Server Component = SSG. fallback options: false — 404 for paths not in getStaticPaths; true — shows fallback HTML, then builds on first request; "blocking" — SSR on first request, then cached as static. Benefits: fastest performance (static files, CDN-served), cheapest hosting, best for SEO. Drawbacks: data must be known at build time; rebuilding needed for content updates (mitigated by ISR). Best for: blogs, documentation, marketing pages, any content-driven site where data doesn't change per-user.