태그와 갱신 방식
저장이 성공한 뒤 갱신 방식에 따라 흐름이 둘로 나뉩니다. updateTag는 즉시 만료해 다음 읽기에서 새 값을 반환하고, revalidateTag는 기존 값을 먼저 반환한 뒤 백그라운드에서 갱신합니다. 왼쪽에서 태그를 바꾸면 함께 영향을 받는 항목도 확인할 수 있습니다.
저장 전 — 태그가 걸린 항목들이 모두 FRESH 상태로 v1을 들고 있습니다.
- updateTag — read-your-own-writes09-revalidating.md:119-160
캐시를 즉시 만료시켜 사용자가 방금 만든 변경을 곧바로 보게 한다. Server Actions에서만 쓸 수 있다. 글을 쓴 뒤 상세 페이지로 이동하는 흐름처럼, 방금 한 변경을 확인하지 못하면 버그로 느껴지는 곳에 쓴다.
- revalidateTag — 백그라운드 갱신09-revalidating.md:91-117
stale-while-revalidate로 동작한다. 이전 값을 즉시 제공하고 뒤에서 새로 만든다. 약간의 지연이 괜찮은 블로그 글이나 상품 카탈로그에 맞다. Server Actions와 Route Handlers 양쪽에서 쓸 수 있다.
- 두 번째 인자 'max'는 stale 창의 길이다09-revalidating.md:117
이전 값을 제공해도 되는 기간을 정한다. 이 기간이 끝나면 이후 요청은 새 콘텐츠가 준비될 때까지 기다린다. max는 가장 긴 기간을 준다.
- 태그는 여러 항목에 걸쳐 적용된다cacheTag('products', 'product:1')
한 캐시 항목에 여러 태그를 붙일 수 있고, 같은 태그를 여러 함수에서 재사용하면 한 번에 함께 무효화된다. 무효화 대상은 두 흐름에 공통이라 왼쪽 열에 한 번만 그린다. 태그를 바꿔 어떤 항목이 영향을 받는지 확인할 수 있다.
같은 그룹의 다른 시각화
정적 셸과 스트리밍
Next.js · Cache Components정적 셸에 포함되는 영역과 요청 시 스트리밍되는 영역을 구분합니다.
use cache 경계와 키
Next.js · Cache Componentsuse cache 경계와 인자에 따른 캐시 키·HIT·MISS를 확인합니다.
cacheLife의 세 시간
Next.js · Cache Components클라이언트 stale과 서버 revalidate·expire의 시간축을 비교합니다.
쇼핑몰로 보는 캐시 설정
Next.js · Cache Components상품·상세·장바구니 요청에서 캐시와 원본 서버를 지나는 경로를 추적합니다.
한 페이지, 영역별 캐시 경계
Next.js · Cache Components정적 셸·컴포넌트 캐시·함수 캐시·캐시 없는 영역의 데이터 경로를 비교합니다.