4.1 KiB
category, tags, title, description, last_updated
| category | tags | title | description | last_updated | |||
|---|---|---|---|---|---|---|---|
| Frontend |
|
Selective Hydration & Streaming | **선택적 하이드레이션(Selective Hydration)과 스트리밍(Streaming)**은 서버 사이드 렌더링(SSR)이 가진 초기 로딩 병목 현상과 상호작용 지연 문제를 해결하기 위한 진보된 렌더링 패턴이다 [1, 2]. | 2026-05-04 |
Selective Hydration & Streaming
📌 Brief Summary
**선택적 하이드레이션(Selective Hydration)과 스트리밍(Streaming)**은 서버 사이드 렌더링(SSR)이 가진 초기 로딩 병목 현상과 상호작용 지연 문제를 해결하기 위한 진보된 렌더링 패턴이다 [1, 2]. 스트리밍은 서버가 모든 데이터를 기다리지 않고 UI 셸(Shell)을 즉시 전송한 뒤, 준비되는 데이터를 청크(Chunk) 형태로 클라이언트에 지속적으로 밀어넣는 기술이다 [1, 3]. 선택적 하이드레이션은 전체 트리가 하이드레이션되는 것을 기다리지 않고 사용자가 상호작용한 특정 컴포넌트를 우선적으로 처리하여, 애플리케이션이 빠르게 반응하도록 돕는 메커니즘이다 [2, 3].
📖 Core Content
-
하이드레이션 갭(Hydration Gap)의 극복: 전통적인 SSR 환경에서는 서버가 렌더링한 HTML이 클라이언트에 표시되더라도, React가 DOM 트리를 순회하며 이벤트 리스너를 연결하는 '하이드레이션'이 완료되기 전까지는 UI가 사용자 입력에 반응하지 않는 문제가 있었다 [2, 4]. 선택적 하이드레이션은 Lanes 우선순위 시스템을 적용하여, 사용자가 아직 하이드레이션되지 않은 요소를 클릭할 경우 기존 하이드레이션 작업을 중단하고 해당 상호작용 경계로 이동하여 우선 처리한 후 나머지 작업을 재개한다 [3].
-
Suspense 기반의 비순차적 스트리밍(Out-of-order Streaming): 이러한 렌더링 최적화는 Suspense 경계를 적극 활용한다 [3, 5]. 초기 요청 시 서버는 전체 화면의 셸을 먼저 렌더링해 응답하고 데이터 페칭이 지연되는 영역은
Loading...상태로 남겨둔다 [3, 5]. 데이터 로드가 완료되면 서버는 순서에 상관없이 결과물을 클라이언트로 스트리밍하며, 브라우저는 전체 응답을 기다리지 않고 도착한 청크부터 점진적으로 렌더링 및 하이드레이션을 수행한다 [1, 3, 6]. -
RSC(React Server Components) 아키텍처와의 시너지: 스트리밍과 선택적 하이드레이션은 React Server Components 아키텍처와 결합하여 더욱 강력해진다 [7]. 서버 컴포넌트가 데이터를 페칭하여 직렬화된 형태(RSC 페이로드)로 스트리밍하면, 클라이언트 측 React는 이를 수신하는 즉시 기존 Fiber 트리에 병합하고 병렬적으로 하이드레이션을 시작함으로써 성능과 사용자 경험을 극대화한다 [6, 8].
⚖️ Trade-offs & Caveats
- 잔존하는 자바스크립트 실행 비용: 선택적 하이드레이션과 스트리밍은 체감 로딩 속도와 초기 상호작용성을 획기적으로 개선하지만, 궁극적으로 모든 클라이언트 컴포넌트의 자바스크립트가 브라우저로 전송되고 실행되어야 한다는 SSR의 본질적인 한계 비용을 제거하지는 못한다 [9]. 이를 근본적으로 해결하기 위해서는 로직을 서버 컴포넌트로 이관하여 자바스크립트 번들 크기 자체를 줄여야 한다 [9].
- 데이터 페칭 워터폴(Waterfall)의 위험성: Suspense를 활용해 비동기 데이터를 병렬로 로딩하더라도, 부모 컴포넌트와 자식 컴포넌트가 각각 별도로 데이터를 페칭하게 될 경우 워터폴 현상이 발생할 수 있다 [10]. 자식 컴포넌트는 부모의 로딩이 끝나기 전까지 페칭을 시작조차 할 수 없으므로, 서로 종속성이 없는 데이터라면 컴포넌트 트리 상단에서 데이터를 미리 로드하여 하위로 전달하도록 최적화해야 한다 [10].
Last updated: 2026-05-03