[next.js 공식문서] 16. Revalidating

next.js 13버전 때 학습내용 정리 문서로 현재와 다름 주의

Revalidating

• 특정시간 간격으로 데이터 재검증
• 업데이트 같은 이벤트를 기반으로 데이터 재검증

background 재검증

fetch('https://...', { next: { revalidate: 60 } });

fetch를 사용하지 않는 경우엔 경로 세그먼트에 설정

// app/page.tsx
export const revalidate = 60;

on-demand 재검증

• 헤드리스 cms의 컨텐츠가 생성되거나 업데이트 되는 경우
• 전자상거래 메타데이터 변경(가격, 설명, 카테고리, 리뷰 등)
  의 상황에서 캐시를 수동으로 제거하여 사용할 것

온디맨드 재검증 사용하기

revalidatePath 또는 revalidateTag로 경로 또는 캐시 태그로 재검증할 수 있음

// app/page.tsx
export default async function Page() {
  const res = await fetch('https://...', { next: { tags: ['collection'] } });
  const data = await res.json();
  // ...
}

// app/api/revalidate/route.ts
import { NextRequest, NextResponse } from 'next/server';
import { revalidateTag } from 'next/cache';
 
export async function GET(request: NextRequest) {
  const tag = request.nextUrl.searchParams.get('tag');
  revalidateTag(tag);
  return NextResponse.json({ revalidated: true, now: Date.now() });
}

오류 처리 및 재검증

재검증을 시도하는 동안 오류가 발생하면 마지막으로 서ㅏㅇ공한 생성된 데이터가 캐시에서 계속 재공됨.
다음 후속 요청에서 데이터 재검증을 재시도함.