온디맨드 재검증(ISR)은 어떻게 동작하나요?

Question

Accepted Answer

**온디맨드 재검증**은 시간 기반 간격을 기다리는 대신 **데이터가 변경되는 바로 그 순간** 캐싱된/정적 페이지를 무효화할 수 있게 해 줍니다. 시간 기반 ISR(`revalidate: N`)에 대한 정밀한 보완책입니다.

## 시간 기반 vs 온디맨드

```tsx
// 시간 기반: 페이지가 고정된 일정으로 새로고침됨 (최대 N초까지 오래된 데이터를 제공할 수 있음)
export const revalidate = 3600; // 매시간

// 온디맨드: 기반 데이터가 변경되는 순간 새로고침 — 기다림 없음, 낭비 없음
```

시간 기반 ISR은 단순하지만 불완전합니다. 너무 짧으면 불필요한 재생성, 너무 길면 오래된 콘텐츠죠. 온디맨드는 변경이 실제로 일어날 때 여러분의 코드에서 재검증을 트리거하여 이를 해결합니다.

## 두 가지 온디맨드 API

```tsx
import { revalidatePath, revalidateTag } from "next/cache";

// 1. fetch에 태그를 지정한 뒤 태그로 무효화
await fetch("https://api/posts", { next: { tags: ["posts"] } });
revalidateTag("posts");      // "posts"로 태그된 모든 페이지/fetch 새로고침

// 2. 또는 특정 경로를 무효화
revalidatePath("/blog/my-post");
```

## 실제 워크플로: CMS 웹훅

```ts
// app/api/revalidate/route.ts — 편집자가 게시할 때 CMS가 호출
import { revalidateTag } from "next/cache";
import { NextRequest, NextResponse } from "next/server";

export async function POST(req: NextRequest) {
  const secret = req.nextUrl.searchParams.get("secret");
  if (secret !== process.env.REVALIDATE_SECRET) {       // 정말 여러분의 CMS인지 확인
    return NextResponse.json({ ok: false }, { status: 401 });
  }
  revalidateTag("posts");                                // 영향받은 페이지를 지금 재빌드
  return NextResponse.json({ revalidated: true });
}
```

흐름: 편집자가 CMS에서 게시 → CMS가 웹훅 호출 → `revalidateTag("posts")`가 캐시를 무효화 → 다음 방문자가 새로 재생성된 정적 HTML을 받음. 페이지는 정적처럼 빠르게 유지되면서 **동시에** 게시 즉시 업데이트됩니다.

## Server Action 변경 후

```tsx
"use server";
export async function createPost(data) {
  await db.post.create({ data });
  revalidateTag("posts"); // 사용자가 새 글을 즉시 봄
}
```

## 왜 중요한가

온디맨드 재검증은 궁극의 목표를 제공합니다: **정적 성능과 실시간 신선도**.

재검증 간격을 추측하는 대신, 콘텐츠가 변경될 때 정확히 무효화합니다. 웹훅(CMS 게시)이나 Server Action 변경 후 `revalidateTag`/`revalidatePath`를 통해서죠.

오래된 콘텐츠와 낭비적인 과도한 재생성을 모두 제거하여, 예측 불가능하게 업데이트되는 콘텐츠에도 ISR을 실용적으로 만듭니다.