처음 만난 Next.js 문서
10.9
마치며
이번 장에서 배운 내용은 아래와 같습니다.
- Request Memoization
- React는
fetchAPI를 확장하여 동일한 URL과 파라미터를 가진 요청을 자동으로 Memoization 함 - 서버 요청의 수명 동안 유지되며 React 컴포넌트 트리가 렌더링을 완료할 때까지 지속됨
- 서버 요청 간에 공유되지 않고 렌더링 동안에만 적용되기 때문에 일반적인 캐시처럼 별도로 재검증할 필요가 없음
- React는
- Data Cache
- Next.js에서 데이터 fetching 결과를 서버 요청 및 배포 간에 지속시키기 위한 캐시
- Next.js가 기본
fetchAPI를 확장하여 서버의 각 요청을 캐싱할 수 있도록 구현한 것 - 재검증하거나 캐싱하지 않도록 제외하지 않는 한 들어오는 요청 및 배포 전반에 걸쳐 지속됨
- 재검증 방식
- 시간 기반 재검증 (Time-based Revalidation)
- 온디맨드 재검증 (On-demand Revalidation)
fetch요청에{ cache: 'no-store' }옵션을 사용하여 캐싱 제외 가능
- Full Route Cache
- 전체 경로를 렌더링하고 캐싱하기 위한 캐시
- 각 경로에 대해 요청을 할 때마다 서버에서 렌더링을 하는 대신 캐싱된 경로를 제공함으로써 페이지 로드를 빠르게 하기 위한 캐시
- 기본적으로 Full Route Cache는 지속됨
- 무효화 (Invalidation) 방법
- 데이터 재검증 (Revalidating Data)
- 재배포 (Redeploying)
- Client-side Router Cache
- Next.js에서 레이아웃, 로딩 상태, 페이지로 분할된 경로 세그먼트의 RSC Payload를 저장하는 메모리 기반의 클라이언트 측 라우터 캐시
- 즉각적인 뒤로/앞으로 탐색이 가능하며, 탐색 간 전체 페이지를 새로고침하지 않으며, React state와 브라우저 state를 유지시켜줌
- Cache Interactions
- Data Cache와 Full Route Cache
- Data Cache를 재검증하거나 캐싱 제외하는 경우에는 Full Route Cache가 무효화됨
- Full Route Cache를 무효화하거나 캐싱 제외하는 경우에는 Data Cache에 영향을 미치지 않음
- Data Cache와 Client-side Router Cache
- Data Cache와 Router Cache를 즉시 무효화하려면 Server Actions에서
revalidatePath()또는revalidateTag()함수 사용 - Route Handlers에서 Data Cache를 재검증할 경우 Router Cache는 즉시 무효화되지 않음
- Data Cache와 Router Cache를 즉시 무효화하려면 Server Actions에서
- Data Cache와 Full Route Cache
- 캐싱 관련 API
- Next.js에는 캐싱과 관련된 다양한 API가 존재
마지막 업데이트: 2025년 10월 24일 02시 40분
이 문서의 저작권은 이인제(소플)에 있습니다. 무단 전재와 무단 복제를 금합니다.
On this page