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

Partial Prerendering (PPR)

정적 셸은 20ms에 페인트되어 완료 지점이 시간축 맨 왼쪽에 표시됩니다. 동적 홀은 그 뒤 350ms부터 스트리밍되지만 첫 화면은 이미 표시됩니다. Next 16에서는 cacheComponents: true가 이 동작을 활성화합니다. experimental.ppr은 16에서 제거됐습니다.

0ms / 600ms
전체 동적 연산CDN 정적 셸동적 홀 스트리밍브라우저 페인트홀 대기
첫 Paint430ms→20ms22× 빠름타임라인을 드래그하면 그 시각으로 이동합니다 · 블록에 마우스를 올리면 아래 설명과 연결됩니다

🔒 전통적 동적 라우트 — 통째로 동적

430ms

쿠키를 한 줄 읽었다는 이유로 페이지 전체가 동적으로 분류된다. 바뀌지 않는 헤더·상품 정보까지 매 요청마다 서버에서 다시 만든다.

  1. ①
    전체 동적 렌더0ms – 400ms

    셸 + 쿠키 조회 + 장바구니 조회를 매 요청마다 함께 계산한다. 캐시할 수 있는 부분까지 400ms를 기다린다.

  2. ②
    전송400ms – 420ms

    연산이 모두 끝난 뒤 완성된 HTML을 전송한다.

  3. ③
    페인트420ms – 430ms

    첫 픽셀이 430ms에야 나타난다.

  • 첫 Paint · 430ms 대기

⚡ PPR — 정적 셸 먼저, 홀은 나중에 (cacheComponents)

20ms

빌드 타임에 만든 정적 셸이 CDN에서 20ms 만에 페인트되고, 동적인 장바구니 구멍(Hole)만 같은 응답 안에서 뒤이어 스트리밍된다. Next 16에서는 next.config의 cacheComponents: true가 이 동작을 켠다 — experimental.ppr 플래그와 세그먼트 옵션 experimental_ppr은 16에서 제거됐다.

  1. ①
    CDN 셸0ms – 14ms

    빌드 시 생성된 정적 셸을 CDN 캐시에서 그대로 꺼낸다. 업스트림 서버를 타지 않아 서버 연산이 0이다. (Edge Runtime과는 다른 이야기다 — 그 런타임은 16에서 deprecated다)

  2. ②
    셸 페인트14ms – 20ms

    20ms에 레이아웃·상품 정보가 화면에 나타난다. 여기가 첫 Paint다.

  3. ③
    홀 대기20ms – 350ms

    장바구니 자리에는 fallback이 놓여 있고, 그동안 화면은 이미 조작 가능하다.

  4. ④
    동적 홀350ms – 440ms

    쿠키가 필요한 장바구니 조각만 서버에서 계산해 스트리밍한다.

  5. ⑤
    홀 채움440ms – 480ms

    fallback 자리에 실제 장바구니가 끼워진다.

  • 첫 Paint · 20ms 대기
  • 장바구니 · 480ms 대기

같은 그룹의 다른 시각화