Back to results for “Rendering (SSR/SSG/ISR)”
Next.js › Rendering (SSR/SSG/ISR)

What are the three main rendering strategies available in Next.js, and what does each one mean?

Beginner

Answer

Server side rendering, called SSR, generates the page fresh on every request. Static site generation, called SSG, generates the page once at build time and reuses it for every visitor. Incremental static regeneration, called ISR, generates a page once but automatically refreshes it after a set amount of time, combining the speed of static pages with reasonably fresh content.
// SSG: fetched once at build time
// SSR: fetched fresh on every request
// ISR: fetched once, then refreshed periodically
const res = await fetch(url, { next: { revalidate: 3600 } });
Real-world example A news website uses SSR for its live sports scores that must always be current, SSG for its rarely changing about page, and ISR for its article pages that update occasionally but do not need to be rebuilt on every single visit.

Common follow-ups: How do you choose the right rendering strategy for a specific page?;Can a single application use all three rendering strategies for different pages?