Skip to main content

Next.js Rendering

SSR + SSG + ISR + CSR = Next.js rendering options

Rendering Strategies​

Server vs Client rendering

Next.js supports multiple rendering strategies:

  • SSR (Server-Side Rendering)
  • SSG (Static Site Generation)
  • ISR (Incremental Static Regeneration)
  • CSR (Client-Side Rendering)

"Next.js provides multiple rendering strategies: SSR for dynamic content, SSG for static pages, ISR for hybrid approaches, and CSR for client-side interactivity."

Server-Side Rendering (SSR)​

Render on each request

export async function getServerSideProps() {
  const data = await fetchData();
  return { props: { data } };
}
  • Runs on every request
  • Fresh data each time
  • Slower but always up-to-date

"SSR renders pages on the server for each request, ensuring fresh content but with higher server load."

Static Site Generation (SSG)​

Build-time generation

export async function getStaticProps() {
  const data = await fetchData();
  return { props: { data } };
}
  • Generated at build time
  • Fast, cached pages
  • No server needed for static pages

"SSG pre-renders pages at build time, creating fast, cacheable static HTML files."

Incremental Static Regeneration (ISR)​

Static + periodic updates

export async function getStaticProps() {
  return {
    props: { data },
    revalidate: 60, // seconds
  };
}
  • Static pages with periodic regeneration
  • Best of both worlds
  • Updates without full rebuild

"ISR allows static pages to be regenerated periodically, combining SSG performance with fresh content."

Client-Side Rendering (CSR)​

Render in browser

  • Use useEffect to fetch data
  • Renders on client
  • Good for user-specific content

"CSR renders content in the browser, suitable for personalized or frequently changing data."

When to Use What​

StrategyUse When
SSGContent doesn't change often
SSRNeed fresh data per request
ISRWant static performance + updates
CSRUser-specific, interactive content

App Router vs Pages Router​

App Router = React Server Components

  • Pages Router: File-based routing with getServerSideProps
  • App Router: React Server Components, layouts, streaming

"App Router introduces React Server Components and improved data fetching patterns."

"Next.js offers multiple rendering strategies: SSG for static content generated at build time, SSR for server-rendered pages on each request, ISR for static pages that regenerate periodically, and CSR for client-side rendering. The choice depends on data freshness requirements and performance needs."

🧠 Ultra-Short Cheat Sheet​

SSR = server per request
SSG = build-time static
ISR = static + revalidate
CSR = client-side
App Router = Server Components
Pages Router = getServerSideProps