Static vs Dynamic Detection

~20 min · dynamic functions, force-static, force-dynamic

Level 0Curious

0 XP0/68 lessons0/11 achievements

0/120 XP to next level120 XP to go0% complete

Detector 가 코드 읽음

Next.js 가 route 별로 build time render (static) 인지 per-request render (dynamic) 인지 결정. 본인 안 물어봐 — 부르는 API 봄:

API	효과
`cookies()`	Dynamic 강제
`headers()`	Dynamic 강제
`searchParams`	Dynamic 강제
`connection()`	Dynamic 으로 명시 opt-in
Cache 없는 `fetch()`	Dynamic data 점으로 취급

필요할 때 override

때로 detector 가 진짜 원하는 default 다른 거 골라. export const dynamic = 'force-static' 이 dynamic API 쓰면 error; 'force-dynamic' 이 dynamic 코드 없어도 per-request render 보장.

비용 위해 중요한 이유

Static route 는 CDN 에서 request 당 compute 비용 0 으로 서빙. Dynamic route 는 매번 본인 코드 실행. 의도적으로 골라.

Code

Static: cached fetch 만·tsx

export default async function AboutPage() {
  const res = await fetch('https://api.example.com/about', {
    cache: 'force-cache',
  });
  return <article>{(await res.json()).text}</article>;
}
// Build 에 한 번 render, static HTML 로 서빙.

Dynamic via cookies()·tsx

import { cookies } from 'next/headers';

export default async function Dashboard() {
  const session = (await cookies()).get('session');
  const data = await fetchUserData(session?.value);
  return <DashboardView data={data} />;
}
// Per-request render.

Route level 에서 한 mode 강제·tsx

export const dynamic = 'force-static';   // cookies()/headers() 쓰면 error
export const dynamic = 'force-dynamic';  // dynamic API 없어도 per-request
export const dynamic = 'auto';           // default — detector 가 결정

External links

Static and dynamic rendering

Exercise

이전 static page 에 (cookies() 쓰는) feature flag check 추가. Build output (next build) 에서 route 가 ○ Static 에서 ƒ Dynamic 으로 flip 됐는지 확인하고, 그게 본인이 원한 trade 인지 토론.

Progress

Progress is local-only — sign in to sync across devices.

← PreviousOn-Demand Revalidation Next →Parallel & Sequential Fetching

이 페이지에서 버그를 발견하셨거나 피드백이 있으세요?문제 신고

🔔 답글 알림 (로그인 필요)

로그인 — 댓글을 남기려면 로그인해 주세요.

아직 댓글이 없어요. 첫 댓글을 남겨보세요.