Antigravity Agent
4.6 KiB
4.6 KiB
category, tags, title, description, last_updated
| category | tags | title | description | last_updated | |||
|---|---|---|---|---|---|---|---|
| Frontend |
|
Hydration (하이드레이션) | 하이드레이션(Hydration)은 서버에서 렌더링되어 전달된 정적인 HTML('건조한' HTML)에 상호작용성과 이벤트 핸들러라는 '물'을 주어 동적인 웹 페이지로 만드는 과정입니다 [1]. | 2026-05-04 |
Hydration (하이드레이션)
📌 Brief Summary
하이드레이션(Hydration)은 서버에서 렌더링되어 전달된 정적인 HTML('건조한' HTML)에 상호작용성과 이벤트 핸들러라는 '물'을 주어 동적인 웹 페이지로 만드는 과정입니다 [1]. 프론트엔드 프레임워크는 전체 DOM을 새로 다시 그리지 않고, 기존 DOM 트리를 재사용하여 이벤트 리스너를 부착하는 방식으로 작동합니다 [2, 3]. 최근에는 초기 로딩 시간 단축과 상호작용성 개선을 위해 React의 선택적 하이드레이션(Selective Hydration)이나 Vue의 지연 하이드레이션(Lazy Hydration) 같은 최적화 기법이 활용되고 있습니다 [4, 5].
📖 Core Content
- 작동 원리 (Mechanism): 하이드레이션은 페이지를 처음부터 렌더링하는 과정이 아닙니다 [3]. 리액트(React)의 경우, 구축 중인 Fiber 트리와 병렬로 기존의 서버 렌더링 DOM 트리를 순회하면서 각 Fiber를 해당하는 DOM 노드에 일치시키고(
fiber.stateNode에 참조 저장), 이벤트 리스너를 부착합니다 [3]. 이처럼 DOM을 완전히 새로 만들지 않고 재사용하기 때문에 새로운 렌더링(Fresh render)보다 더 빠르게 동작합니다 [3]. - 선택적 하이드레이션 (Selective Hydration): 과거에는 전체 트리가 순차적으로 하이드레이션될 때까지 페이지의 어떤 부분도 상호작용할 수 없는 한계가 있었습니다 [3]. 이를 해결하기 위해 React 18은 우선순위 기반의 선택적 하이드레이션을 도입했습니다 [4]. 사용자가 특정 요소를 클릭하면 React는 기존의 하이드레이션 작업을 중단하고, 사용자가 상호작용한 부분을 처리하는 데 필요한 부분만 우선적으로 하이드레이션한 뒤, 나머지 트리의 작업을 재개합니다 [4].
- 지연 하이드레이션 (Lazy Hydration): Vue 3.5 버전에서는 서버 사이드 렌더링(SSR)의 성능 향상을 위해 지연 하이드레이션을 도입했습니다 [5]. 이 기능은 컴포넌트가 뷰포트(Viewport)에 보일 때만 하이드레이션되도록 허용하여, 필요할 때까지 컴포넌트의 활성화를 지연시킴으로써 초기 로드 시간을 줄이고 전반적인 애플리케이션 성능을 최적화합니다 [5]. e-커머스 등 콘텐츠가 많은 애플리케이션에서 매우 유용합니다 [6].
- 서버 컴포넌트와의 관계: 리액트 서버 컴포넌트(React Server Components, RSC)는 클라이언트로 자바스크립트 코드가 전송되지 않고 오직 서버에서만 실행되므로 하이드레이션 과정 자체가 아예 존재하지 않습니다 [7].
⚖️ Trade-offs & Caveats
- 하이드레이션 갭 (Hydration Gap): SSR을 통해 사용자는 렌더링이 완료된 것처럼 보이는 페이지를 즉시 볼 수 있지만, 자바스크립트가 완전히 다운로드되고 하이드레이션이 끝나기 전까지는 버튼을 클릭해도 아무런 반응이 없는 '하이드레이션 갭' 현상이 발생합니다 [2]. 페이지가 상호작용 가능해 보이지만 실제로는 그렇지 않은 시기가 존재합니다 [2].
- 클라이언트 병목 현상: DOM 트리를 재사용하더라도 결국 브라우저는 대량의 자바스크립트 번들을 모두 다운로드하고 실행해야 합니다 [8]. 또한 트리 상단에 있는 단일의 느린 컴포넌트가 트리를 순회하는 하이드레이션 과정을 막고 있다면, 트리의 하단에 있는 버튼의 클릭 핸들러 부착까지 지연되어 전체 페이지의 응답성이 차단되는 병목을 초래할 수 있습니다 [3].
- 이중 작업 구조 (Two-Trip Problem): 서버에서 HTML을 그리기 위해 실행했던 작업과 데이터 패칭을, 클라이언트에서 하이드레이션을 진행하며 브라우저가 자바스크립트를 다시 실행하여 중복 수행하게 되는 구조적 비효율성이 존재합니다 [8]. 이러한 서버 렌더링의 근본적인 한계는 결국 클라이언트로 코드를 보내지 않는 '리액트 서버 컴포넌트(RSC)'가 등장하게 된 핵심 배경이 되었습니다 [8, 9].
Last updated: 2026-05-03