Next.js가 제공하는 캐싱

1. Request Memoization (React 수준)

"한 번의 렌더링 안에서 같은 요청은 딱 한 번만!"

하나의 페이지를 그릴 때 여러 컴포넌트에서 동일한 fetch() 요청을 하더라도, 실제 네트워크 요청은 한 번만 발생하도록 리액트가 자동으로 최적화해주는 기능입니다.

• 위치: 서버 메모리
• 수명: 하나의 서버 요청(Request)이 완료될 때까지
• 특징: 동일한 URL과 옵션을 가진 GET 요청에 자동으로 적용됩니다. 컴포넌트 트리 깊숙한 곳에서 같은 데이터를 여러 번 호출해도 성능 저하가 없습니다.

---

2. Data Cache (Next.js 수준)

"서버 요청과 배포를 넘나들며 데이터를 기억하자!"

외부 API로부터 가져온 데이터를 서버 측에 영구적으로 저장하는 캐시입니다. fetch의 revalidate 옵션을 통해 제어합니다.

• 위치: 서버의 영구 저장소
• 수명: 수동으로 삭제하거나 지정한 시간(revalidate)이 지나기 전까지 영구적
• 설정:
  • fetch(url, { next: { revalidate: 3600 } }): 1시간마다 갱신 (ISR)
  • fetch(url, { cache: 'no-store' }): 캐싱 하지 않음 (실시간 데이터)

---

3. Full Route Cache (서버 사이드)

"페이지 전체를 미리 그려서 창고에 넣어두자!"

빌드 타임이나 데이터를 새로고침할 때, 페이지의 HTML과 RSC(React Server Component) 페이로드를 서버에 정적으로 저장해두는 방식입니다.

• 위치: 서버 (Static 사이트 결과물)
• 수명: 기본적으로 영구적 (데이터가 바뀌거나 다시 빌드할 때까지)
• 효과: 사용자가 접속했을 때 서버에서 연산할 필요 없이 이미 만들어진 페이지를 즉시 보내주므로 응답 속도가 비약적으로 빠릅니다.

---

4. Router Cache (클라이언트 사이드)

"이미 가본 페이지는 브라우저가 기억하자!"

사용자가 웹사이트를 돌아다닐 때, 브라우저가 이미 방문했거나 미리 로드(prefetch)한 페이지의 정보를 메모리에 담아두는 캐시입니다.

• 위치: 사용자 브라우저 메모리
• 수명: 세션 동안 유지 (새로고침하면 사라짐)
• 효과: 뒤로 가기나 링크 클릭 시 서버 요청 없이 즉시 화면이 전환되어 네이티브 앱 같은 사용자 경험을 제공합니다.

---

💡 캐싱 요약 테이블

종류	저장 위치	관리 대상	수명
Request Memoization	서버 (RAM)	동일 요청 내 fetch	단일 요청 기간
Data Cache	서버 (Disk)	외부 API 데이터	영구적 / 설정 시간
Full Route Cache	서버 (Disk)	HTML & RSC 페이로드	영구적 (정적 페이지)
Router Cache	브라우저 (RAM)	방문한 페이지 정보	세션/새로고침 전까지

---

⚠️ 주의할 점

최신 Next.js 버전에서는 데이터의 실시간성이 중요한 경우, 명시적으로 캐시를 비활성화(no-store)하거나 revalidatePath, revalidateTag 같은 함수를 사용하여 서버에 저장된 캐시를 의도적으로 파괴(Invalidation)해야 최신 데이터를 보여줄 수 있습니다.