📅 2025-12-08

➡️ Next.js Caching에 대해 새롭게 알게 된 것 또는 헷갈리는 부분 정리 + 🤔❓

---

🔎 학습 리마인드

📌 Caching

🔗 Guides: Caching

• Next.js는 대부분의 영역에서 fetch 함수를 기반으로 캐싱을 함
• fetch("url" , option) 두 번째 인자인 option을 이용해서 캐싱 전략을 갖고 있음

💡 Full Route Cache (build 시)

• 페이지 전체를 빌드 시점에 미리 생성해서 캐싱
• 이후 동일한 요청은 서버 렌더링 없이 미리 생성된 HTML을 바로 반환
• SSG 방식과 유사
• fetch 옵션 → cache: 'force-cache' (기본)

작동 과정

1. React Server Component Payload 생성

   • 서버에서 React Server Components를 특별한 스트리밍 가능한 형식으로 렌더링
   • 클라이언트에서 필요한 컴포넌트 정보와 상태가 포함됨

2. HTML 생성

   • Next.js가 이 Payload와 클라이언트 컴포넌트의 JS 정보를 바탕으로 최종 HTML을 서버에서 완성

3. 결과를 Full Route Cache에 저장

   • 동일한 요청이 들어오면 서버는 페이지를 다시 렌더링하지 않고
   • 캐싱된 HTML을 즉시 반환 → 매우 빠른 응답

사용 예시

• 블로그 글, 마케팅 페이지, FAQ 같은 변경이 거의 없는 정적인 페이지

캐시 무효화

• 데이터 변경이 필요하면 revalidate 로 다시 생성 가능 (ISR)

💡 Data Cache (요청 시)

• fetch를 이용해 가져온 데이터를 캐싱
• 동일한 fetch 요청은 여러 요청 간 재사용
• API 호출 수 감소 → 성능 향상
• Next 15부터 cache: "no-store"가 기본값

예시 (ISR)

const res = await fetch('<https://api.example.com/data>',
{next: { revalidate: 3600 } });
const data = await res.json

• 3600초 동안 캐시 유지
• 이후 첫 요청 시 백그라운드에서 재검증

매 요청마다 최신 데이터 필요할 때

const res = await fetch('<https://api.example.com/data>',{
cache : 'no-store'
});
const data = await res.json()

• 캐싱 안 함

---

🌊 Deep Dive

🤔 Request Memoization

“요청을 기억한다”

• 중복된 요청이 발생하지 않도록 자동으로 데이터 패칭을 최적화 해주는 기능
• Next에서 자동으로 제공해 줌

💡 Data Cache와 Request Memoization

• Data Cache의 목적 → 백엔드 서버로부터 불러온 데이터를 거의 영구적으로 보관하기 위해 사용
  • 서버 가동 중에는 영구적으로 보관됨
• Request Memoization의 목적 → 중복된 API 요청 방지
  • 하나의 페이지를 렌더링 하는 동안에만 존재

---