Next.js
/Intermediate
Static Site Generation (SSG)
Definition
A rendering strategy where the HTML is generated exactly ONCE during the build process (`npm run build`). That same HTML file is then served instantly to every user.
Explain Like I'm New
Cooking a pizza and freezing it. When a user asks for a pizza, you don't cook a new one (SSR); you just instantly hand them the frozen one. It is absurdly fast and costs the server almost zero processing power.
Real World Example
A company's 'About Us' page or a Blog post. The content almost never changes, so there is no reason to fetch from the database every time a user visits. Build it once and serve it to millions.
Common Use Cases
- •Blogs
- •Marketing pages
- •Documentation
- •E-commerce product catalogs
Interactive Example
/* Static Site Generation in the App Router (Also called 'Static Rendering') */ export default async function BlogPost() { // In the App Router, fetch is automatically cached by default! // Next.js will run this fetch ONCE during `npm run build`, // generate the HTML, and never run this fetch again. const res = await fetch('https://api.cms.com/post/1'); const post = await res.json(); return ( <article> <h1>{post.title}</h1> <p>{post.content}</p> </article> ); }
Interview Questions
basic
- When is the HTML generated in Static Site Generation?
intermediate
- What is the main problem with SSG if you use it for an application with data that updates frequently?