mediumFrontend

What are the rendering strategies in Next.js (SSR, SSG, ISR, CSR)?

Q: What are the rendering strategies in Next.js (SSR, SSG, ISR, CSR)?

**TL;DR.** **SSG** pre-renders HTML at **build time**; **SSR** renders **per request** on the server; **ISR** serves static pages but **regenerates** them in the background; **CSR** renders in the **browser**. The App Router picks **static or dynamic** per route automatically based on the data/APIs you use. SSG build time ISR static + revalidate <text class='d-text' x='278' y='74' text-anchor='m

450 views

Understand the problem

Server rendering, static generation, incremental regeneration, and client rendering.

nextjsrenderingssrssgisr

Attempt it yourself

Sketch your approach before reading the solution — that's what interviews test.

Stuck? AI Nudge Available

Get a conceptual hint to guide your logic without spoiling the final implementation.

Study the solution

The solution is waiting

Give it an honest attempt first — then compare your thinking with the full walkthrough.

Read the code

Choosing the strategy via fetch/segment config

// SSG (default): cached at build
const a = await fetch('https://api/x');
// ISR: revalidate every 60s
const b = await fetch('https://api/x', { next: { revalidate: 60 } });
// SSR: never cache → dynamic per request
const c = await fetch('https://api/x', { cache: 'no-store' });
// Force a whole route dynamic:
export const dynamic = 'force-dynamic';

Join the discussion

Discussion (0)

No responses yet. Be the first to share what you think.

What are Route Handlers in Next.js and how do they differ from Pages API routes?

What is ISR (Incremental Static Regeneration) in Next.js and how do you implement it?