---
category: Frontend
tags: [auto-wikified, technical-documentation, frontend]
title: Progressive Hydration (점진적 하이드레이션)
description: "점진적 하이드레이션(Progressive Hydration)은 서버가 모든 데이터를 기다리지 않고 HTML 셸(shell)을 즉시 전송한 뒤, 데이터가 해결되는 대로 Suspense 경계를 스트리밍하는 기술입니다 [1]."
last_updated: 2026-05-04
---

# Progressive Hydration (점진적 하이드레이션)

## 📌 Brief Summary
점진적 하이드레이션(Progressive Hydration)은 서버가 모든 데이터를 기다리지 않고 HTML 셸(shell)을 즉시 전송한 뒤, 데이터가 해결되는 대로 Suspense 경계를 스트리밍하는 기술입니다 [1]. 클라이언트는 페이지의 나머지 부분이 여전히 다운로드되는 동안에도 이미 도착한 청크(chunk)들에 대해 먼저 하이드레이션을 시작할 수 있습니다 [1]. 이를 통해 가장 느린 데이터베이스 쿼리를 기다리느라 빈 화면이 노출되는 문제를 방지하고, 사용자에게 점진적인 로딩 경험을 제공합니다 [1].

## 📖 Core Content
* **청크 기반의 HTML 스트리밍:** 점진적 하이드레이션은 데이터를 모두 기다렸다가 한 번에 전송하는 대신, 데이터를 여러 청크로 나누어 순차적(progressive)으로 전송합니다 [1, 2].
* **Suspense 마커와 재시도 메커니즘:** 내부적으로 이 기술은 Suspense 주석 노드 마커(`<!--$-->`, `<!--$!-->`)와 재시도 콜백(retry callback) 메커니즘을 통해 스트리밍된 HTML을 처리하고 렌더링합니다 [2]. 
* **선택적 하이드레이션(Selective Hydration)과의 연계:** React 18에서는 우선순위(Lanes) 시스템을 활용해 하이드레이션 과정을 일시 중단할 수 있습니다 [1]. 만약 하이드레이션이 완료되기 전에 사용자가 버튼을 클릭하면, React는 해당 상호작용 경계로 먼저 이동하여(SyncLane 활용) 상호작용을 처리할 수 있을 만큼만 먼저 하이드레이션한 뒤 나머지 트리의 작업을 재개합니다 [1].

## ⚖️ Trade-offs & Caveats
점진적 하이드레이션과 선택적 스트리밍 기술을 적용하더라도 기존 SSR(Server-Side Rendering) 구조가 가진 근본적인 한계 비용은 사라지지 않습니다 [3]. 하이드레이션이 수행되려면 결국 자바스크립트 코드가 클라이언트 기기로 전송(ship)되어야 하며, 모든 컴포넌트가 클라이언트 측에서 다시 실행(run)되어야 한다는 치명적인 제약이 따릅니다 [3]. 이러한 구조적 단점은 점진적 하이드레이션만으로는 해결할 수 없으며, 결국 클라이언트로 자바스크립트를 아예 보내지 않는 '서버 컴포넌트(Server Components)' 패러다임이 도입되는 계기가 되었습니다 [3].

---
*Last updated: 2026-05-03*