Next.js 캐싱 전략 - ISR, SSG, SSR 캐시 제어

Next.js는 다양한 캐싱 전략을 제공하여 성능을 최적화합니다.
이 글에서는 fetch 옵션, revalidate, generateStaticParams 등을 활용한 캐싱 전략을 정리합니다.

---

1. fetch 캐시 옵션

// app/products/page.tsx

// 1. 기본 캐시 (force-cache)
const data = await fetch("https://api.example.com/products", {
  cache: "force-cache", // 기본값, 캐시 사용
});

// 2. 캐시 없음
const data = await fetch("https://api.example.com/products", {
  cache: "no-store", // 매번 새로 요청
});

// 3. 재검증 시간 설정 (ISR)
const data = await fetch("https://api.example.com/products", {
  next: { revalidate: 60 }, // 60초마다 재검증
});

• force-cache: 빌드 시 또는 첫 요청 시 캐시하고 재사용
• no-store: 캐시하지 않고 매번 새로 요청
• revalidate: 지정한 시간(초)마다 백그라운드에서 재검증

---

2. Static Generation (SSG)

// app/products/[id]/page.tsx
export async function generateStaticParams() {
  const products = await fetchProducts();
  return products.map((product) => ({
    id: product..(),
  }));
}

    () {
   product =  (params.);
   ;
}