Time-Based Revalidation (ISR)

~20 min · ISR, revalidate, stale-while-revalidate

Level 0Curious

0 XP0/68 lessons0/11 achievements

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

Static 속도, fresh-enough data

Time-based revalidation 이 App Router 의 Incremental Static Regeneration (ISR) 변형. Page 가 pre-render 되고 cache 에서 서빙; revalidate interval 후 다음 request 가 background re-render trigger. 사용자는 cached version 즉시 받음 — "loading new content" spinner 없음.

두 scope

Scope	설정
Per fetch	`fetch(url, { next: { revalidate: 60 } })`
Per route segment	Page 또는 layout 위에 `export const revalidate = 60`

한 줄 lifecycle

Fresh request → render → cache. Revalidate window 안 → cache 서빙. Window 후 → stale 서빙, background re-render kick. 다음 request → fresh 서빙.

Code

Per-fetch ISR·tsx

export default async function ProductPage({ params }: { params: Promise<{ id: string }> }) {
  const { id } = await params;
  const res = await fetch(`https://api.example.com/products/${id}`, {
    next: { revalidate: 60 },
  });
  return <ProductCard product={await res.json()} />;
}

Per-segment ISR·tsx

// app/blog/page.tsx
export const revalidate = 300;

export default async function BlogPage() {
  const posts = await fetch('https://api.example.com/posts').then(r => r.json());
  return <PostList posts={posts} />;
}

Route 한 mode 강제·tsx

// app/(marketing)/page.tsx
export const dynamic = 'force-static';   // 한 번 build, 절대 re-render

// app/(app)/dashboard/page.tsx
export const dynamic = 'force-dynamic';  // 매 request render

External links

Incremental Static Regeneration

Exercise

ISR product page 박고 dev tool 에서 동작 관찰: 첫 request render, window 안 refresh 가 stale 서빙, window 후 refresh 가 두 번째 hit 에서 regeneration trigger.

Progress

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

← Previousfetch() 가 더 이상 cache 안 됨 Next →On-Demand Revalidation

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

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

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

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