처음 만난 Next.js 문서
10.2
Data Cache
Data Cache에 대해 설명하기 전에, 먼저 앞에 나온 Request Memoization의 경우 Next.js가 아닌 React에서 제공하는 기능이고, 지금 나오는 Data Cache는 Next.js에서 제공하는 기능이라는 점을 기억하면서 학습을 진행하기 바랍니다.
Data Cache는 Next.js에서 데이터 fetching 결과를 서버 요청 및 배포 간에 지속시키기 위한 캐시입니다. Next.js가 기본 fetch API를 확장하여 서버의 각 요청을 캐싱할 수 있도록 구현한 것이라고 보면 됩니다. 아래 그림은 Data Cache의 작동 방식을 그림으로 나타낸 것입니다.
먼저 렌더링 중에 'force-cache' 옵션을 사용한 fetch 요청이 호출되면, Next.js는 Data Cache에서 캐싱된 응답이 있는지 확인합니다. 만약 캐싱된 응답이 발견되면, 즉시 반환되고 Memoization 됩니다. 참고로 이 때 Memoization은 앞에 나온 Request Memoization을 의미합니다. 그리고 캐싱된 응답이 발견되지 않으면 실제 Data Source에 요청이 이뤄지고 결과가 Data Cache에 저장되며 Memoization 됩니다. 참고로 'no-store'와 같이 캐싱에서 제외하도록 옵션을 설정한 경우, 결과는 항상 실제 Data Source에서 가져오며 Memoization 됩니다.
여기서 한 가지 기억해야 할 점은, 데이터가 캐싱되었든 캐싱되지 않았든 동일한 데이터에 대한 중복 요청을 피하기 위해 Request는 항상 Memoization 된다는 점입니다.
NOTE. Data Cache와 Request Memoization의 차이점
두 캐싱 메커니즘 모두 캐싱된 데이터를 재사용하여 성능을 향상시키지만, Data Cache는 들어오는 요청 및 배포 간에 지속되는 반면, Memoization은 요청의 수명 동안만 지속됩니다.
- Request Memoization은 동일한 렌더링 패스에서 중복 요청 수를 줄임
- 렌더링 서버에서 데이터 캐시 서버(CDN 또는 엣지 네트워크) 또는 데이터 소스(데이터베이스 또는 CMS)로의 네트워크 경계를 넘어야 하는 요청을 줄이는 데 도움을 줌
- Data Cache는 원본 데이터 소스에 대한 요청 수를 줄임
- 요청 및 배포 간에 지속되기 때문에, 더 광범위한 요청을 처리하고 성능을 최적화하는 데 중요한 역할을 함
지속 시간 (Duration)
데이터 캐시는 재검증하거나 캐싱하지 않도록 제외하지 않는 한 들어오는 요청 및 배포 간에 지속됩니다.
재검증 (Revalidating)
캐싱된 데이터는 아래와 같은 두 가지 방법으로 재검증할 수 있습니다.
- 시간 기반 재검증 (Time-based Revalidation)
- 시간을 기반으로 재검증하는 방식
- 캐싱되고 일정 시간이 지난 이후에 새 요청이 들어오면 데이터를 재검증
- 데이터가 자주 변경되지 않고 항상 최신 데이터가 필요한 것이 아닐 경우에 주로 사용
- 온디맨드 재검증 (On-demand Revalidation)
- 필요한 경우에 직접 재검증을 요청하는 방식
- 태그 또는 경로를 기반으로 한 번에 데이터 그룹 전체를 재검증 할 수 있음
- 당장 최신 데이터를 보여줘야 할 필요가 있을 경우에 사용
캐싱 제외 (Opting out)
fetch 요청의 응답을 캐싱하지 않도록 제외하려면, 아래와 같이 fetch 요청에 { cache: 'no-store' } 옵션을 사용하면 됩니다.
let data = await fetch('https://api.example.com/posts', { cache: 'no-store' });
마지막 업데이트: 2025년 10월 24일 02시 37분
이 문서의 저작권은 이인제(소플)에 있습니다. 무단 전재와 무단 복제를 금합니다.
On this page