Next.js 학습v16.3.2
시각화 목록
React · Selective Hydration

Selective Hydration

400ms에 도착한 클릭이 언제 처리되는지 대기 막대로 보여줍니다. 일괄 수화 레인에서는 840ms짜리 빨간 막대가 길게 이어지고, 선택적 수화 레인에서는 90ms 만에 끝납니다.

0ms / 1,600ms
블로킹 수화컴포넌트 수화클릭 처리반응 렌더
클릭 응답(INP)840ms→90ms9.3× 빠름타임라인을 드래그하면 그 시각으로 이동합니다 · 블록에 마우스를 올리면 아래 설명과 연결됩니다

🔒 일괄 하이드레이션 — 순서대로

840ms

트리를 위에서부터 통째로 수화한다. 400ms에 누른 댓글 버튼은 자기 차례가 올 때까지 이벤트 큐에서 840ms를 기다린다.

  1. ①
    사이드바0ms – 300ms

    먼저 선언된 순서대로 사이드바부터 수화한다.

  2. ②
    피드300ms – 720ms

    가장 무거운 피드가 메인 스레드를 계속 점유한다. 이 사이에 클릭이 들어와도 멈추지 않는다.

  3. ③
    댓글창720ms – 1,240ms

    마지막 차례가 되어서야 댓글창이 수화된다. 이 시점에야 눌러 둔 클릭이 처리된다.

  • 댓글 클릭 · 840ms 대기

⚡ Selective Hydration — 만진 곳부터

90ms

클릭이 들어온 순간 진행 중이던 피드 수화를 중단하고, 사용자가 만진 서브트리로 우선순위를 옮긴다. 나머지는 그 뒤에 이어서 수화한다.

  1. ①
    사이드바0ms – 300ms

    동일하게 사이드바부터 수화를 시작한다.

  2. ②
    피드300ms – 400ms

    피드 수화 도중 400ms에 클릭이 도착한다.

  3. ③
    댓글창400ms – 490ms

    클릭한 서브트리를 가로채 먼저 수화한다. 90ms 만에 클릭이 응답된다.

  4. ④
    피드 재개490ms – 750ms

    급한 일이 끝났으니 중단했던 피드 수화를 이어서 진행한다.

  5. ⑤
    나머지750ms – 1,050ms

    남은 하위 컴포넌트를 여유 있게 수화한다.

  • 댓글 클릭 · 90ms 대기

같은 그룹의 다른 시각화