[next.js]캐싱

캐싱이란🤔

• 데이터를 효율적으로 저장하고 빠르게 제공하기 위한 기술🥳
• Next.js에서 클라이언트와 서버에서 데이터를 빠르게 제공하거나 서버 부하를 줄이는 데 사용

---

캐싱의 종류

1. 클라이언트 캐싱

• 브라우저나 사용자 디바이스에 데이터를 저장하여 재요청 없이 데이터를 제공
• 예시: 브라우저가 이미 로드된 이미지나 CSS 파일을 캐싱하여, 다시 방문 시 빠르게 로드 🏃‍♀️

2. 서버 캐싱

• 서버가 자주 사용하는 데이터를 미리 저장하여 클라이언트 요청에 빠르게 응답
• 서버 부하를 줄이고 성능을 최적화 🌟
• 예시 : API 요청 결과를 캐싱하여 동일 요청 시 더 빠르게 처리

---

주요 캐싱 개념과 옵션

1. Full Route Cache

• 페이지 전체를 캐싱하여 요청 시 저장된 페이지를 반환
• 정적 페이지나 cache : 'force-cache' 사용시 적용

export async function getStaticProps() {
  const res = await fetch("https://api.example.com/data", {
    cache: "force-cache", // 요청 결과를 무조건 캐싱
  });
  const data = await res.json();
  return { props: { data } };
}

2. Request 메모제이션

• 동일 요청에 대한 중복 계산을 방지하고 결과를 재사용
• 클라이언트와 서버 모두 적용 가능

const fetchWithMemo = (url) => {
  if (!cache[url]) {
    cache[url] = fetch(url).then((res) => res.json());
  }
  return cache[url];
};

3. Data Cache

• fetch를 통해 받은 데이터를 저장

옵션

• cache : "force-cache" : 요청 결과를 항상 캐싱

const res = await fetch("https://api.example.com/data", {
  cache: "force-cache", // 결과값 저장
});

• cache: "no-store" : 캐싱을 하지 않고 매번 최신 데이터를 가져옴 (Next.js 15버전 이후 기본값)

const res = await fetch("https://api.example.com/data", {
  cache: "no-store", // 항상 최신 데이터를 가져옴
});

4. Incremental Static Regeneration (ISR)

• next: {revalidate: n} 옵션으로 특정 시간(n초)마다 데이터를 업데이트
• 정적 페이지를 일정 주기로 자동 재검증

const res = await fetch("https://api.example.com/data", {
  next: { revalidate: 10 }, // 10초마다 데이터 재검증
});

5. On-Demand Revalidate (태그 캐싱)

• 특정 태그를 기반으로 데이터 캐싱 및 무효화
• next: { tags: ['a'] }로 캐싱 태그 설정 후, revalidateTag를 호출해 특정 태그의 캐시 무효화

export async function getStaticProps() {
  const res = await fetch("https://api.example.com/data", {
    next: { tags: ['a'] }, // 'a' 태그로 요청을 태그화
  });
  const data = await res.json();
  return { props: { data } };
}

// 캐시 무효화
import { revalidateTag } from 'next/cache';
export async function revalidateData() {
  await revalidateTag('a'); // 'a' 태그에 해당하는 캐시 무효화
}

---

🌟 요약🌟

클라이언트 캐싱: 브라우저에 저장된 데이터를 사용.

서버 캐싱: 서버에서 데이터를 저장하고 빠르게 응답.

캐싱 옵션:

• cache: "force-cache": 무조건 캐싱.
• cache: "no-store": 캐싱 비활성화.
• next: { revalidate: n }: 일정 주기로 데이터 재검증.
• next: { tags: [] }: 특정 태그 기반 캐싱 관리.