Next.js를 사용하면 전체 사이트를 다시 빌드할 필요 없이 특정 정적 경로를 업데이트할 수 있다. 재유효화(증분적 정적 재생성으로도 알려짐)를 사용하면 정적인 이점을 유지하면서 수백만 개의 페이지로 확장할 수 있다.
Next.js에서는 두 가지 유형의 재유효화가 있다.
-
Background: 특정 시간 간격마다 데이터를 재유효화한다. -
On-Demand: 업데이트와 같은 이벤트에 따라 데이터를 재유효화한다.
Background Revalidation
특정 간격으로 캐시된 데이터를 재유효화하려면 fetch()에서 next.revalidate 옵션을 사용하여 리소스의 캐시 유효기간을 설정할 수 있다. (초 단위)
fetch('https://...', { next: { revalidate: 60 } });fetch를 사용하지 않고 데이터를 재유효화하려면(fetch가 아닌 외부 패키지나 쿼리 빌더 사용) 경로 세그먼트 구성을 사용할 수 있다.
// app/page.tsx
export const revalidate = 60; // revalidate this page every 60 secondsfetch 외에도 cache를 사용하여 데이터를 재유효화할 수 있다.
작동 방식
-
빌드 시 정적으로 렌더링된 라우트에 대한 요청이 발생하면 초기에는 캐시된 데이터가 표시된다.
-
초기 요청 이후 60초 이전에 해당 라우트로의 모든 요청도 캐시되어 즉시 표시된다.
-
60초 윈도우 이후, 다음 요청은 여전히 캐시된(구식) 데이터를 표시한다.
-
Next.js는 백그라운드에서 데이터 재생성을 트리거한다.
-
라우트가 성공적으로 생성된 후, Next.js는 캐시를 무효화하고 업데이트된 라우트를 표시한다. 백그라운드 재생성이 실패한 경우, 이전 데이터는 변경되지 않은 상태로 유지된다.
생성되지 않은 라우트 세그먼트에 대한 요청이 발생하면 Next.js는 첫 번째 요청 시 동적으로 라우트를 렌더링한다. 이후 요청은 캐시로부터 정적인 라우트 세그먼트를 제공한다.
💡 참고 사항
상위 데이터 provider에서 캐싱이 기본적으로 활성화되어 있는지 확인하라. 그렇지 않으면 (예: useCdn: false를 사용하여) 재유효화를 통해 ISR 캐시를 업데이트할 신선한 데이터를 가져올 수 없다. 캐싱은 요청되는 엔드포인트에 대해 Cache-Control 헤더를 반환할 때 CDN에서 발생할 수 있다. Vercel의 ISR은 캐시를 전역적으로 유지하고 롤백을 처리한다.
On-demand Revalidation
60으로 재유효화 시간을 설정하면 모든 방문자는 사이트의 동일한 생성된 버전을 1분 동안 볼 수 있다. 캐시를 무효화하는 유일한 방법은 1분이 지난 후에 페이지를 방문하는 경우다.
Next.js 앱 라우터는 라우트나 캐시 태그를 기반으로 컨텐츠를 필요에 따라 재유효화하는 기능을 지원한다. 이를 통해 특정 fetch에 대한 Next.js 캐시를 수동으로 지울 수 있어서 다음과 같은 경우 사이트를 업데이트하기가 더욱 쉬워진다.
- 헤드리스 CMS에서 컨텐츠가 생성되거나 업데이트되는 경우
- 전자상거래 메타데이터가 변경되는 경우(가격, 설명, 카테고리, 리뷰 등)
온디맨드 재유효화 사용
데이터는 경로(revalidatePath) 또는 캐시 태그(revalidateTag)별로 온디맨드로 재유효화될 수 있다.
예를 들어, 다음과 같은 fetch에서는 캐시 태그 collection을 추가한다.
// app/page.tsx
export default async function Page() {
const res = await fetch('https://...', { next: { tags: ['collection'] } });
const data = await res.json();
// ...
}이 캐시된 데이터는 Route Handler에서 revalidateTag를 호출하여 필요에 따라 온디맨드로 재유효화될 수 있다.
// 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() });
}Error Handling and Revalidation
데이터 재유효화 시도 중 오류가 발생하면 마지막으로 성공적으로 생성된 데이터가 캐시로부터 계속 제공된다. 다음 요청에서 Next.js는 데이터를 다시 재유효화하기 위해 재시도한다.
[ 출처 ]
https://nextjs.org/docs/app/building-your-application/data-fetching/revalidating
