피드로 돌아가기
Dev.toFrontend
원문 읽기
Page Root 중심 Hydration 탈피를 통한 클라이언트 리소스 최적화 전략
The Page Root Was the Wrong Unit
AI 요약
Context
전체 페이지를 하나의 Root로 관리하는 단일 Hydration 모델의 구조적 한계 분석. 모든 컴포넌트가 상호 의존적으로 Hydration 되는 Waterfall 현상으로 인해 특정 지점의 병목이 전체 페이지의 인터랙션 지연을 초래하는 문제 발생.
Technical Solution
- Suspense Boundary 도입을 통한 Selective Hydration 구현으로 Ready 상태의 HTML 스트리밍 및 우선순위 기반 Hydration 스케줄링 처리
- TanStack Start의 Deferred Hydration을 통한 Intersection Observer 기반 가시성 판단 및 초기 Hydration 큐 제외 로직 적용
- Deferred Chunking 컴파일 최적화로 가시성 확보 시점까지 관련 JavaScript 번들 다운로드 지연 및 네트워크 비용 절감
- RSC Island Architecture 채택을 통한 Page Root의 클라이언트 소유권 제거 및 독립적인 Subtree 단위 Hydrate Root 분리 설계
- 정적 콘텐츠와 인터랙티브 영역의 소유권 분리를 통한 불필요한 Reconcile 연산 및 CPU 부하 제거
실천 포인트
- Application Shell 구조인 경우 Suspense Boundary 기반의 Selective Hydration 적용 검토 - 비긴급 영역이 많은 페이지라면 가시성 및 Idle 타임 기반의 Deferred Hydration 도입 고려 - 정적 콘텐츠 비중이 압도적인 경우 RSC Island 모델을 통한 Root Hydration 제거 및 부분적 Client Ownership 할당 설계