Sign in
Skip to solution
mediumFrontend

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

450 views
01

Understand the problem

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

nextjsrenderingssrssgisr
02

Attempt it yourself

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

Nudge consolestandby

Stuck? Beam a request up — the console returns a conceptual nudge that guides your logic without spoiling the implementation.

03

Study the solution

SSG pre-renders HTML at build time; SSR renders per request on the server; ISR regenerates static pages in the background on a schedule or on demand; CSR renders in the browser. The App Router chooses static or dynamic per route based on the data/APIs you use.

Solution ready — 2 min read

Classified // press E to declassify

04

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';
05

Join the discussion

Discussion (0)

Sign in to join the discussion.

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

Transmission complete // awaiting log

KEEP THE
STREAK ALIVE.

Dossier 57 of 95 decoded in the Next.js track. One more won't hurt.

Back to track