핵심 답변
Next.js는 여러 레벨의 캐싱을 제공합니다.
📌 1. fetch 옵션 기반 캐싱
cache: 'force-cache' → 빌드 시 캐시 (SSG 효과)cache: 'no-store' → 캐시 없음, 매 요청마다 실행 (SSR 효과)next: { revalidate: 60 } → 60초마다 재검증 (ISR 효과)📌 2. unstable_cache서버 함수(DB 쿼리 등) 결과를 캐싱
📌 3. 태그 기반 재검증
revalidateTag()로 특정 태그의 캐시만 무효화예시 코드
typescript
// SSR: 매 요청마다 서버에서 실행
const res = await fetch('/api/data', { cache: 'no-store' });
// ISR: 60초마다 재생성
const res = await fetch('/api/data', { next: { revalidate: 60 } });
// 함수 결과 캐싱
import { unstable_cache } from 'next/cache';
const getProducts = unstable_cache(
async () => await db.product.findMany(),
['products'],
{ revalidate: 300, tags: ['products'] }
);
// 특정 태그 캐시 무효화 (Server Action에서)
revalidateTag('products');핵심 용어
📌 ISR(Incremental Static Regeneration)정적으로 생성된 페이지를 주기적으로 재생성하는 방식입니다. SSG의 속도와 SSR의 최신성을 함께 얻을 수 있습니다.
📌 revalidateTag특정 태그로 묶인 캐시를 무효화하는 함수입니다. 데이터가 변경될 때 관련 페이지만 선택적으로 재생성합니다.