跳到主要内容

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