[NEXT] 데이터 캐시

📦 데이터 캐싱 (Data Caching in App Router)

• 정의: fetch 메서드를 사용할 때, Next.js 서버에서 데이터를 캐싱하여 반복적인 요청을 줄이는 기능
• 특징
  • Next.js 서버에 저장: 서버에서 데이터를 일시적으로 보관
  • 갱신 설정 가능: 특정 주기로 데이터를 자동 갱신하거나, 영구적으로 보관하는 것도 설정 가능
  • 성능 개선: 동일한 데이터를 여러 번 요청하지 않도록 하여, 네트워크 비용과 서버 부하를 줄임
  • 제한: 이 캐싱 기능은 fetch 함수에서만 동작

---

✅ fetch 캐시 설정

const response = await fetch('/api/data', {
  cache: '...',
  next: { ... }
});

1. cache: 'no-store' (기본값)

• ❌ 캐시 저장 안 함
• 매 요청마다 항상 최신 데이터를 가져옴
• 🔁 실시간성이 중요한 데이터에 적합 (예: 실시간 주식 가격, 채팅)

---

2. cache: 'force-cache'

• ✅ 요청 결과를 무조건 캐싱
• 한 번 가져온 데이터는 다시 fetch해도 캐시된 결과 반환
• 정적 데이터에 적합 (예: 공지사항, 마감된 기사)

🖼 첫 요청 이후 캐시에서 응답하는 흐름도

• fetch('~/api', { cache: 'force-cache' })를 사용하면 서버에서 데이터를 캐싱함.
• 최초 요청 시 캐시가 없어 백엔드 서버에 요청(MISS) → 응답을 캐시에 저장(SET).
• 이후 동일한 요청이 들어오면 캐시에서 바로 응답(HIT) → 백엔드에 재요청 없이 HTML 렌더링.
• 이 방식은 정적인 데이터에 적합하며, SSR 중에도 재사용 가능.

---

3. next: { revalidate: 3 }

• ⏱ 3초마다 캐시 자동 갱신
• 기존 데이터를 사용하면서, 백그라운드에서 주기적으로 신선한 데이터를 받아옴
• Page Router의 ISR과 유사한 방식

🖼 주기적으로 백그라운드에서 갱신되는 흐름도

• fetch('~/api', { next: { revalidate: 3 } })는 3초마다 캐시를 갱신함.
• 최초 요청 → 캐시 MISS → 백엔드에서 데이터 받아서 캐시 SET.
• 3초 경과 후 다시 요청 시 캐시된 데이터는 STALE(만료) 처리되며, 백엔드에 다시 요청해 데이터 갱신.
• 이후 요청은 갱신된 최신 데이터(HIT)를 반환.

---

4. next: { tags: ['a'] }

• 📌 태그 기반 On-Demand Revalidation
• 해당 태그(a)를 가진 데이터를 원할 때 직접 갱신 가능
• 예: 특정 버튼을 눌러 해당 데이터를 새로고침 (→ revalidateTag('a'))