Compare SSR, SSG, ISR and CSR. When do you use each?
Take a moment.
Say your answer out loud or write it down first — retrieval is what makes it stick. Reveal when you're ready.
Short answer
SSG builds pages once at deploy time — fastest, best for stable content. SSR renders per request — always fresh, for personalized data. ISR regenerates static pages in the background on an interval. CSR renders in the browser after JS loads — good for dashboards behind auth.
Detailed explanation
These are tradeoffs along two axes: when HTML is produced and how stale it may be. Static generation pre-renders at build: CDN-cacheable, near-instant response, ideal for marketing pages and docs. Server-side rendering computes HTML per request: right when content depends on cookies/headers or changes every hit (user dashboards, search results), at the cost of server time per visitor. Incremental Static Regeneration hybridizes: pages serve cached HTML instantly while regenerating in the background after N seconds (stale-while-revalidate), perfect for product pages or blogs with frequent-but-not-realtime updates. Client rendering ships a shell and fetches via JS: simplest for highly interactive views where SEO doesn't matter. In App Router these become defaults plus caching knobs — fetch cache options, revalidate segment config, dynamic = 'force-dynamic' — rather than separate functions.
Example
// App Router examples:
// SSG (default if data is static)
export default async function Docs() { return <Markdown />; }
// ISR — revalidate every hour
export const revalidate = 3600;
// SSR — always dynamic
export const dynamic = 'force-dynamic';
export default async function Dashboard() {
const data = await getUserData(); // uses cookies → dynamic
}Interview tip
Organize by the 'freshness vs speed' tradeoff, then map each mode to a real page type. Mentioning how App Router unifies them via caching shows current knowledge.
Common mistakes
- Describing ISR as just 'slower SSG' instead of stale-while-revalidate.
- Not knowing cookies/headers usage forces dynamic rendering.