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

ISR Stale-While-Revalidate

재생성에 걸리는 시간은 두 레인에서 같습니다. 차이는 방문자가 그 시간을 기다리느냐(3,000ms 빨간 막대), 응답과 분리해 백그라운드에서 처리하느냐(0ms)입니다. export const revalidate 기준의 이전 모델이며, cacheComponents를 켜면 이 옵션은 제거되고 cacheLife가 대신합니다.

0ms / 3,200ms
캐시 조회·교체블로킹 재생성구버전 즉시 응답백그라운드 재생성응답 전송
두 번째 방문자 응답3,000ms→0ms즉시 반영타임라인을 드래그하면 그 시각으로 이동합니다 · 블록에 마우스를 올리면 아래 설명과 연결됩니다

🔒 만료 즉시 재생성 — 기다렸다 준다 (이전 모델)

3,000ms

캐시가 만료된 직후 도착한 방문자가 재생성 비용을 대신 낸다. 3초짜리 서버 렌더가 끝날 때까지 그 요청은 붙잡혀 있다.

  1. ①
    캐시 만료0ms – 100ms

    export const revalidate 시간이 지나 캐시 엔트리가 무효화된다. (이전 모델 기준 — Cache Components에서는 cacheLife의 revalidate 값이 이 역할을 한다)

  2. ②
    서버 렌더 (블로킹)100ms – 3,000ms

    만료 직후 도착한 방문자의 요청이 재생성을 트리거하고, 그 요청 자체가 3초 동안 응답을 받지 못한다.

  3. ③
    응답3,000ms – 3,100ms

    재생성이 끝나고서야 새 HTML이 전송된다.

  • 방문자 요청 · 3,000ms 대기

⚡ ISR — 구버전 먼저, 갱신은 뒤에서 (이전 모델)

0ms

만료됐어도 캐시에 남아 있는 구버전을 0ms에 그대로 돌려준다. 재생성은 응답과 무관하게 백그라운드에서 돌고, 끝나면 다음 방문자부터 새 버전을 받는다. 이 화면은 export const revalidate 기준의 이전 모델이다 — cacheComponents: true를 켜면 revalidate 세그먼트 옵션은 16.0.0에서 제거되고, 같은 역할을 use cache + cacheLife가 맡는다.

  1. ①
    캐시 만료0ms – 100ms

    revalidate 시간이 지났지만 구버전 엔트리는 그대로 남아 있다. 응답 헤더 x-nextjs-cache로 치면 STALE이다.

  2. ②
    구버전 즉시 응답100ms – 160ms

    방문자는 기다리지 않고 캐시된 구버전을 곧바로 받는다. 체감 지연이 0ms다.

  3. ③
    백그라운드 재생성160ms – 2,760ms

    재생성은 응답 경로 밖에서 돈다. 어떤 방문자도 이 시간을 기다리지 않는다.

  4. ④
    새 캐시 교체2,760ms – 2,900ms

    완성된 새 버전이 캐시에 올라가고, 다음 방문자부터 새 내용을 본다.

  • 방문자 요청 · 0ms 대기

같은 그룹의 다른 시각화