Next.js 캐싱과 revalidate 옵션을 설명해주세요.

Next.js 캐싱은 fetch 결과, 렌더링 결과, 라우터 캐시 등 여러 계층에서 동작합니다. App Router에서는 fetch 옵션과 revalidate 설정을 이해해야 데이터 신선도와 성능을 제어할 수 있습니다.

fetch 캐시

// 가능한 한 캐시
await fetch(url, { cache: 'force-cache' });

// 매 요청 최신 데이터
await fetch(url, { cache: 'no-store' });

// 60초마다 재검증
await fetch(url, { next: { revalidate: 60 } });

revalidate: 60은 최대 60초 동안 캐시된 데이터를 사용할 수 있음을 의미합니다.

라우트 단위 설정

export const revalidate = 300;
export const dynamic = 'force-dynamic';

페이지 전체의 렌더링 전략에 영향을 줄 수 있습니다.

On-demand revalidation

데이터 변경 후 특정 path나 tag를 무효화할 수 있습니다.

'use server';
import { revalidatePath, revalidateTag } from 'next/cache';

await updatePost(id);
revalidatePath(`/posts/${id}`);
revalidateTag('posts');

실무 주의점

• 사용자별 데이터는 공유 캐시에 들어가면 안 됩니다.
• stale 허용 시간이 비즈니스 요구와 맞는지 확인합니다.
• 여러 fetch가 섞이면 가장 동적인 요청이 페이지 전체 렌더링에 영향을 줄 수 있습니다.
• 캐시가 의심될 때는 응답 헤더와 로그로 실제 재검증 여부를 확인합니다.

면접 답변 포인트

Next.js의 revalidate는 정적/캐시된 데이터를 주기적으로 갱신하기 위한 옵션입니다. 성능을 얻는 대신 stale 가능성을 받아들이는 것이며, 개인화 데이터와 mutation 후 무효화 전략을 조심해야 합니다.