Next.js 학습v16.3.2
시각화 목록
Next.js · Cache Components

쇼핑몰로 보는 캐시 설정

스터디몰 홈페이지 한 번의 요청이 세 구역을 동시에 지납니다. 베스트셀러 진열대는 use cache와 cacheLife로 수명을 정한 캐시에서 돌아오고, 상품 상세는 cacheTag가 붙어 관리자의 updateTag()·revalidateTag()에 따라 다음 요청이 달라지며, 장바구니는 cookies()를 읽어야 해서 매번 원본 서버까지 갑니다. 시계를 흘려 수명을 넘기고 페이지 요청을 보내면 점 3개가 어디서 돌아오는지가 곧 캐시의 답입니다.

개념 시각화 · Next.js 16.3.2 기준 · 실제 서버 실행이나 측정이 아닙니다 · 수명은 시연용 축소값공식 문서 ↗
시뮬레이션 0.0s · 진열대 나이 0.0s
HITSTALEEXPIRED서버 렌더
진열대 cacheLife 설정설정 · 진열대 cacheLife
실행 · 누르면 캔버스에 반영

아직 요청이 없습니다. "페이지 요청"을 누르면 점 3개가 동시에 출발해 레인마다 다른 곳에서 돌아옵니다.

위 3개는 레인별 규칙(마우스를 올리면 캔버스의 해당 레인이 강조됩니다), 아래는 최근 페이지 요청이 레인마다 겪은 일입니다.

  • 진열대 — cacheLife({ revalidate: 8, expire: 18 })cacheLife.md:44-52 · :35

    8s 뒤 STALE, 18s 뒤 EXPIRED — 실제로는 "seconds"·"minutes" 프리셋처럼 쓴다. revalidate를 넘기면 다음 요청이 구값을 즉시 받으면서 백그라운드 재생성을 시작시키고, expire까지 넘기면 그 요청은 새 값이 만들어질 때까지 기다린다. 시간이 지나기만 해서는 아무 일도 일어나지 않는다 — 요청이 트리거다.

  • 상품 상세 — cacheTag('product:1')updateTag.md:22-27 · revalidateTag.md:69

    cacheLife를 생략해 default(revalidate 15분)를 상속한다 — 시연 중엔 시간으로 만료되지 않고, 위 관리자 버튼(태그 갱신 API)으로만 바뀐다. 태그를 붙여 두면 '어느 항목을' 갱신할지 이름으로 고를 수 있다.

  • 장바구니 — cookies()는 use cache 안에서 못 읽는다use-cache.md:126

    요청마다 다른 사용자의 세션을 읽어야 하므로 결과를 저장해 둘 수 없다. 'use cache' 안에서 cookies()를 부르면 next-request-in-use-cache 오류가 나고, 이 구역은 Suspense 경계 안에서 요청 시점에 서버가 렌더링해 스트리밍한다. 캐시 노드가 없는 이유다.

같은 그룹의 다른 시각화