Rendering Spectrum

Static, ISR, SSR, CSR — spectrum

웹 페이지는 "CDN 에서 그대로 서빙되는 fully static" 부터 "브라우저에서 JS 로 매번 그리는 fully dynamic" 사이 어딘가에 살아. Next.js 는 이 line 전체를 지원하고, route 별로 / fetch 별로 위치를 골라.

전략	언제 골리는지	예
SSG (build time)	request-time data 없음, fetch 가 cache 됨	Docs, blog, marketing
ISR (revalidate)	Static + `revalidate` 힌트	Product page, news, pricing
SSR (per request)	`cookies()`, `headers()`, `searchParams` 사용	Auth'd page, dashboard, search
CSR (browser)	Client Component 안에서 state 사용	Live editor, collaborative UI

Next.js 가 mode 어떻게 detect 하는지

Mode 를 이름으로 고르는 게 아니라 — 호출하는 API 로 골라져. cookies() 나 headers() 부르면 route 가 dynamic 으로 변하고, fetch 에 cache: 'force-cache' 붙이면 그 data 점은 static 이야. Build time 에 자동으로 detect 돼.

한 줄 짜기 전에 골라두는 이유

Spectrum 위 위치 잘못 고르면 Next.js app 이 비싸지거나 (전부 dynamic) stale 해져 (전부 static). Route 별로 결정해 — 뭐가 변하고, 얼마나 자주, freshness 비용은 누가 내?

Code

Default 가 static·tsx

// app/about/page.tsx
export default async function AboutPage() {
  const text = await fetch('https://api.example.com/about', {
    cache: 'force-cache',
  }).then(r => r.text());
  return <article>{text}</article>;
}
// Build time 에 한 번 render, 그 뒤로는 static HTML 로 서빙.

cookies() 만지면 dynamic·tsx

// app/dashboard/page.tsx
import { cookies } from 'next/headers';

export default async function Dashboard() {
  const session = (await cookies()).get('session'); // <- dynamic 으로 trigger
  const data = await fetchUserData(session?.value);
  return <DashboardView data={data} />;
}
// 매 request 마다 re-render — cookies() 가 request bound 라서.

Route segment 강제·tsx

// app/(marketing)/page.tsx
export const dynamic = 'force-static';

// app/(app)/page.tsx
export const dynamic = 'force-dynamic';

// Default: 'auto' — 코드 보고 detect.

Static, ISR, SSR, CSR — spectrum

Next.js 가 mode 어떻게 detect 하는지

한 줄 짜기 전에 골라두는 이유

Code

External links

Exercise

Progress

댓글 0