Skip to main content
← 스터디로 돌아가기

Hydration Not Completed 데모

Next.js의 <Link>는 hydration이 완료된 후에야 prefetch를 시작합니다. 클라이언트 JS 번들이 크면 hydration이 늦어지고, prefetch도 지연됩니다. 아래 두 페이지를 비교해보세요.

파일 구조

hydration-not-completed/
├── page.tsx              ← 현재 페이지
├── heavy-client/
│   └── page.tsx          ← Heavy Client Component (큰 번들)
└── server-optimized/
    └── page.tsx          ← Server Component (최소 JS)

페이지 비교

Heavy Client →Server Optimized →

Hydration 타임라인

Heavy Client Component

HTML 다운로드
JS 번들 다운로드 (큰 번들)
Hydration
Prefetch

Server Component (최적화)

HTML 다운로드
JS (최소)
Hydra
Prefetch (빠르게 시작!)

번들 크기 영향

  • • 'use client' → JS 번들에 포함
  • • 큰 번들 → 긴 다운로드 + 파싱
  • • Hydration 지연 → Prefetch 지연
  • • 첫 네비게이션이 느려짐

최적화 전략

  • • Server Component 기본 사용
  • • 'use client' 경계를 말단으로 이동
  • • 무거운 라이브러리는 dynamic import
  • • 상호작용 없는 부분은 서버에 유지

체험 포인트: Heavy Client 페이지는 전체가 Client Component로 구성되어 있습니다. Server Optimized 페이지는 동일한 콘텐츠를 Server Component로 렌더링하여 클라이언트 JS를 최소화합니다. 브라우저 DevTools의 Network 탭에서 JS 번들 크기를 비교해보세요.

핵심 파일 코드

// demo/nextjs/16.1.6/linking-and-navigating/hydration-not-completed/page.tsx
<Link href="/heavy-client">Heavy Client</Link>
<Link href="/server-optimized">Server Optimized</Link>

// 핵심 비교:
// heavy-client/page.tsx    -> 페이지 전체 'use client'
// server-optimized/page.tsx -> 리스트는 Server, 필터만 Client