# [[하이드레이션 ([[Hydration]])]]

## 📌[[ brief]] Summary
하이드레이션(Hydration)은 서버에서 사전 렌더링된 정적 HTML을 클라이언트가 전달받은 후, [[JavaScript]]를 실행하여 이벤트 리스너와 상태를 연결함으로써 완전한 상호작용이 가능한 애플리케이션으로 변환하는 과정입니다 [1]. SSR(Server-Side Rendering)의 빠른 콘텐츠 표시 장점과 CSR(Client-Side Rendering)의 상호작용성을 결합하지만, 하이드레이션이 완료되기 전까지는 사용자의 입력에 응답하지 않아 지연이 발생할 수 있습니다 [1-5]. 

## 📖 Core Content
*   **작동 방식 및 역할:**
    *   서버는 데이터가 포함된 HTML을 생성하여 클라이언트(브라우저)로 전송합니다 [3, 5].
    *   브라우저는 이 HTML을 즉시 표시하므로 사용자는 콘텐츠를 바로 볼 수 있지만, 이 시점에서는 상호작용할 수 없는 정적인 상태입니다 [2, 3].
    *   이후 브라우저가 JavaScript 번들을 다운로드하고 실행하면, React가 가상 DOM을 렌더링된 HTML에 "연결(attach)"하여 버튼 클릭 등 각종 이벤트 핸들러와 상태 관리를 활성화합니다. 이 과정이 바로 하이드레이션입니다 [1, 2, 5].
*   **성능에 미치는 영향 및 주요 과제:**
    *   하이드레이션은 TBT(총 차단 시간), FID(최초 입력 지연), TTI(상호작용까지의 시간) 등 핵심 성능 지표([[Core Web Vitals]])에 직접적인 영향을 미칩니다 [6]. 
    *   기본적으로 React는 전체 페이지를 한 번에 하이드레이션하려 하기 때문에 메인 스레드를 차단하는 불필요한 JavaScript 실행이 발생하고, 이로 인해 사용자가 클릭해도 즉각적으로 반응하지 않는 입력 지연(Input lag)을 초래할 수 있습니다 [5, 7]. 
    *   서버 렌더링 결과와 클라이언트 측 렌더링이 일치하지 않을 때 발생하는 '하이드레이션 불일치 에러(Mismatch errors)'와 모든 컴포넌트의 JavaScript 번들을 로드해야 해서 발생하는 번들 크기 비대화(Bundle size bloat) 문제도 자주 겪는 과제입니다 [7-9].
*   **하이드레이션 최적화 전략:**
    *   **점진적/선택적 하이드레이션 (Selective Hydration):** 동적 임포트(`next/dynamic`)를 사용해 화면 상단(Above-the-fold)의 중요한 콘텐츠를 먼저 처리하고 나머지 덜 중요한 컴포넌트의 하이드레이션을 분산시킵니다 [8, 10, 11].
    *   **가시성 기반 지연 하이드레이션 (Lazy Hydration):** `IntersectionObserver` API 등을 활용하여 컴포넌트가 뷰포트에 들어올 때만 하이드레이션을 실행합니다 [10, 11].
    *   **부분 하이드레이션 (Partial Hydration) 및 아일랜드 아키텍처:** 상호작용이 필요한 특정 부분만 하이드레이션하고 나머지는 정적 HTML로 남겨둡니다 [12, 13].
    *   **스트리밍 및 Suspense:** React의 Suspense API를 사용하여 서버에서 HTML을 점진적으로 스트리밍 처리합니다 [14].
    *   **[[React [[Server Components]] (RSC)]]:** 클라이언트 측으로 전송되는 JavaScript를 완전히 없애고 오직 서버에서만 실행되게 함으로써, 해당 컴포넌트들에 대해서는 하이드레이션 과정 자체를 생략합니다 [15-23].

## 🔗 Knowledge Connections
- **Related Topics:** [[Server-Side Rendering (SSR)]], [[Client-Side Rendering (CSR)]], [[React Server Components (RSC)]], [[Time to Interactive (TTI)]], [[Total [[Blocking]] Time (TBT)]]
- **Projects/Contexts:** [[Next.js]], [[React 18]]
- **Contradictions/Notes:** SSR은 초기 콘텐츠 렌더링(FCP)이 빠르고 SEO에 유리하다는 큰 장점이 있지만, 하이드레이션 단계가 완료되기 전까지 애플리케이션의 상호작용이 지연된다는 뚜렷한 한계(트레이드오프)가 있습니다 [4, 24, 25]. 이 문제를 근본적으로 해결하기 위해 [[React 18]]은 동시성 렌더링을 통한 하이드레이션 청크 분할 및 사용자가 상호작용하는 부분을 우선순위로 두는 선택적 하이드레이션을 도입하였고 [26], [[React Server Components]]는 하이드레이션 단계를 완전히 제거하는 구조를 제시합니다 [21, 23].

---
*Last updated: 2026-04-25*