피드로 돌아가기
Dev.toFrontend
원문 읽기
JS 번들 380kb의 한계를 극복한 Server Components 기반의 Hydration 최적화
How React Works (Part 8)? Server Components & Hydration: The Real Story
AI 요약
Context
기존 SSR 아키텍처의 Two-trip 문제로 인한 Client-side 리소스 중복 소모 발생. 정적 콘텐츠임에도 모든 컴포넌트가 JS 번들에 포함되어 저사양 기기 및 느린 네트워크 환경에서 초기 렌더링 지연 및 Hydration Gap 발생.
Technical Solution
- Server Components 도입을 통한 정적 마크업의 Server-only 렌더링 및 Client JS 번들 크기 원천 제거
- Fiber tree와 Server-rendered DOM을 병렬로 순회하며 fiber.stateNode에 참조를 저장하는 Hydration 메커니즘 적용
- Selective Hydration을 통한 트리 전체의 순차적 Hydration 병목 해결 및 우선순위 기반의 부분적 인터랙션 활성화
- Suspense comment node markers(, )를 활용한 HTML 스트리밍 및 청크 단위의 점진적 전달 구조 설계
- tryToClaimNextHydratableInstance 로직을 통한 커서 기반의 DOM walking 및 효율적인 Fiber-to-DOM 매칭 구현
실천 포인트
- 인터랙션이 없는 정적 UI 요소는 Server Components로 분리하여 번들 크기 감소 검토 - Suspense를 활용한 스트리밍 렌더링 도입으로 LCP(Largest Contentful Paint) 개선 가능성 확인 - Hydration Gap으로 인한 사용자 경험 저하를 방지하기 위해 Selective Hydration 전략 적용