정적 셸과 스트리밍
핵심은 셸 경계 상자입니다. 정적 헤더와 use cache가 붙은 BlogPosts는 상자 안에 들어가고, cookies()를 읽는 Suspense 구역은 fallback만 상자 안에 남습니다. 본체는 요청 시 상자 밖에서 스트리밍됩니다. use cache는 페이지 전체를 정적으로 만드는 기능이 아니라 결과를 셸에 포함하는 기능입니다.
빌드 — 정적 헤더와 use cache가 붙은 BlogPosts가 셸 상자 안에 들어갑니다. Suspense 구역에는 폴백만 들어갑니다.
- 한 페이지에 세 가지가 공존한다08-caching.md:241-300
정적 콘텐츠는 자동으로 프리렌더되고, use cache가 붙은 동적 콘텐츠는 정적 셸에 포함되며, <Suspense> 안의 런타임 동적 콘텐츠는 요청 시 스트리밍된다. 라우트 단위로 하나를 고르는 것이 아니다.
- use cache는 페이지를 정적으로 만들지 않는다셸 상자의 안과 밖
캐시된 컴포넌트의 결과가 셸에 포함될 뿐이다. 같은 페이지에 cookies()를 읽는 구역이 있으면 그 구역은 셸 밖에 남아 요청마다 실행된다. 상자 경계가 곧 그 구분이다.
- 정적 셸은 HTML이자 RSC Payload08-caching.md:444-454
셸은 초기 로드용 HTML과 클라이언트 내비게이션용 RSC Payload 두 형태로 생성되어 업스트림 서버를 거치지 않고 CDN에서 직접 서빙된다. 그래서 주소로 바로 들어와도 즉시 내용이 보인다.
같은 그룹의 다른 시각화
use cache 경계와 키
Next.js · Cache Componentsuse cache 경계와 인자에 따른 캐시 키·HIT·MISS를 확인합니다.
cacheLife의 세 시간
Next.js · Cache Components클라이언트 stale과 서버 revalidate·expire의 시간축을 비교합니다.
태그와 갱신 방식
Next.js · Cache ComponentsupdateTag와 revalidateTag 이후의 읽기·갱신 방식을 비교합니다.
쇼핑몰로 보는 캐시 설정
Next.js · Cache Components상품·상세·장바구니 요청에서 캐시와 원본 서버를 지나는 경로를 추적합니다.
한 페이지, 영역별 캐시 경계
Next.js · Cache Components정적 셸·컴포넌트 캐시·함수 캐시·캐시 없는 영역의 데이터 경로를 비교합니다.