cacheLife의 세 시간
클라이언트와 서버에는 서로 다른 시간축이 있습니다. 위 레인의 stale은 라우터가 서버에 확인하지 않고 값을 쓰는 시간이고, 아래 레인의 revalidate·expire는 서버 쪽 시간입니다. 시간축을 클릭해 요청 시점을 옮기면 즉시 응답, 백그라운드 갱신, 대기 중 하나로 이어집니다.
캐시가 만들어지고 2시간 뒤에 요청이 도착하면—구값을 즉시 돌려주고, 바로 그 요청이 백그라운드 재생성을 시작시킵니다.
- stale — 클라이언트의 시간cacheLife.md:95-105
클라이언트 라우터가 서버에 확인하지 않고 캐시된 내용을 그대로 쓰는 시간이다. 이 구간에서는 네트워크 요청 자체가 없다. 이 시간이 지나면 다음 이동이나 요청 때 서버에 확인한다.
- revalidate — 다음 요청이 트리거한다cacheLife.md:108-120
이 시간이 지나면 서버는 다음 요청에 캐시된 값을 먼저 주고 백그라운드에서 재생성한다. 시간이 지나기만 해서는 갱신이 시작되지 않으며, 다음 요청이 있어야 한다.
- expire — 여기서는 요청이 기다린다cacheLife.md:123-128
트래픽이 없는 채로 이 시간을 넘기면 다음 요청은 구값을 받지 못하고 새 콘텐츠가 준비될 때까지 동기적으로 기다린다. expire는 revalidate보다 길어야 하며, Next.js가 검증해 잘못된 설정에 에러를 낸다.
- 프로필은 이름 붙은 세 값의 조합이다cacheLife.md:139-147
seconds·minutes·hours·days·weeks와 default·max가 미리 정의돼 있고, next.config에서 재정의할 수 있다. cacheLife를 부르지 않으면 default가 적용되므로, 캐시 지시자마다 프로필을 명시하는 편이 좋다.
같은 그룹의 다른 시각화
정적 셸과 스트리밍
Next.js · Cache Components정적 셸에 포함되는 영역과 요청 시 스트리밍되는 영역을 구분합니다.
use cache 경계와 키
Next.js · Cache Componentsuse cache 경계와 인자에 따른 캐시 키·HIT·MISS를 확인합니다.
태그와 갱신 방식
Next.js · Cache ComponentsupdateTag와 revalidateTag 이후의 읽기·갱신 방식을 비교합니다.
쇼핑몰로 보는 캐시 설정
Next.js · Cache Components상품·상세·장바구니 요청에서 캐시와 원본 서버를 지나는 경로를 추적합니다.
한 페이지, 영역별 캐시 경계
Next.js · Cache Components정적 셸·컴포넌트 캐시·함수 캐시·캐시 없는 영역의 데이터 경로를 비교합니다.