[Next js] Next.js의 Caching

Next.js의 캐싱(Caching)이란?

Next.js는 페이지 성능을 향상시키기 위해 자동으로 다양한 캐싱 전략을 제공
- 빌드 시점 캐싱 (Full Route Cache)
- 요청 시 데이터 캐싱 (Data Cache)

Next.js의 fetch API는 브라우저의 fetch API를 확장한 것이며, 캐싱 전략을 설정할 수 있는 강력한 기능을 제공

---

1. Full Route Cache (빌드 시점 캐시)

정의: Next.js가 빌드 단계에서 전체 페이지를 렌더링하여 HTML 및 데이터를 미리 캐싱

장점: 동일한 페이지 요청이 올 때 매번 렌더링하지 않고 미리 렌더링된 캐시를 제공하기에 응답 시간이 매우 빠름

특징:
- React Server Components를 미리 렌더링하여 결과를 캐싱
- 사용자 요청마다 미리 생성된 페이지 제공 (속도 매우 빠름)

단점: 데이터가 자주 변하는 경우, 실시간 반영이 어려움

---

2. Data Cache (요청 시점 데이터 캐시)

정의: 데이터 요청 시점에 데이터를 캐싱하여 반복적인 API 호출을 방지하는 방식

효과: 데이터 요청 횟수를 줄여 응답 속도를 높이고, 서버 부하를 줄여줌

예시 (ISR)

// 1시간 동안 캐시된 데이터를 제공, 이후 다시 불러옴
const res = await fetch('https://api.example.com/data', { next: { revalidate: 3600 } });
const data = await res.json();

예시 (SSR)

// 항상 최신 데이터를 요청 (캐시 사용 X)
const res = await fetch('https://api.example.com/data', { cache: 'no-store' });
const data = await res.json();

---

유용한 캐싱 기능

generateStaticParams()

정적인 페이지들을 빌드 시점에 미리 생성하는 데 사용

// posts의 slug를 이용해 정적 페이지 미리 생성
export async function generateStaticParams() {
  const posts = await fetch('https://.../posts').then((res) => res.json());
 
  return posts.map((post) => ({
    slug: post.slug,
  }));
}

// params로 전달된 값 사용 가능
export default function Page({ params }) {
  const { slug } = params;
  // ...
}

---

태그 기반 캐싱 (tags)

특정 데이터를 태그로 식별하여 효율적으로 캐시를 관리

fetch('/api/data', {
  next: {
    tags: ['products'],
  }
});

---

캐시 무효화 (revalidate)

캐시된 데이터를 주기적으로 갱신하는데 사용 (ISR 방식)

fetch('/api/data', {
  next: {
    revalidate: 60, // 60초마다 데이터 갱신
  }
});