Antigravity Agent
206875badc
- Created Index.md for Topics_Art, Topics_Biz, Topics_Blog, Topics_GD\n- Established P-Reinforce entry points for specialized knowledge domains
4.2 KiB
4.2 KiB
Hydration
📌 Brief Summary
Hydration은 서버에서 생성된 정적 HTML을 클라이언트에서 JavaScript를 통해 완전히 상호작용 가능한 애플리케이션으로 변환하는 과정입니다 [1]. 브라우저가 서버로부터 미리 렌더링된 HTML을 받아 화면에 표시한 후, 다운로드한 JavaScript 번들을 실행하여 이벤트 리스너를 연결하고 상태(state)를 동기화합니다 [2, 3]. 이 과정을 거쳐야만 사용자가 정적인 뼈대(Skeleton) 화면을 넘어 버튼 클릭이나 폼 입력 등의 동적 상호작용을 수행할 수 있게 됩니다 [1, 4].
📖 Core Content
- Hydration의 작동 원리 및 역할: SSR(Server-Side Rendering) 환경에서 서버는 데이터가 포함된 완전한 HTML을 브라우저로 전송합니다 [2]. 브라우저는 이를 즉시 화면에 렌더링하여 사용자에게 보여주지만(빠른 콘텐츠 표시), JavaScript 번들이 다운로드, 파싱 및 Hydration 되기 전까지는 페이지가 상호작용하지 않습니다 [2, 5]. 즉, Hydration은 서버가 제공한 건조한(Dehydrated) HTML 컴포넌트에 생명을 불어넣어 반응형으로 만드는 필수 단계입니다 [1, 6].
- 성능에 미치는 부정적 영향: 기본적으로 React는 화면에 보이지 않는 요소까지 포함하여 전체 페이지를 한 번에 Hydration 하려고 시도합니다 [7]. 이로 인해 불필요한 JavaScript 실행이 발생하여 메인 스레드(Main Thread)가 차단되고, 결과적으로 TBT(Total Blocking Time), FID(First Input Delay), TTI(Time to Interactive)와 같은 핵심 성능 지표가 악화될 수 있습니다 [7, 8]. 시각적 요소는 렌더링되었으나 클릭해도 반응하지 않는 지연 현상이 발생하여 사용자 경험(UX)에 악영향을 미치기도 합니다 [5, 7].
- 주요 문제 및 발생 원인:
- Hydration 에러 (Mismatch): 서버에서 렌더링된 HTML과 클라이언트 렌더링 결과가 일치하지 않을 때 발생합니다. 주로 환경 조건에 따른 렌더링 차이, 시간 의존적 데이터 변화, 서드파티 라이브러리의 DOM 조작 등이 원인입니다 [9].
- 번들 크기 비대화: Hydration을 위해서는 모든 컴포넌트의 JavaScript 코드가 필요하므로, 번들 크기가 커져 다운로드 및 실행 오버헤드가 증가합니다 [10].
- Hydration 최적화 전략:
- 선택적 및 점진적 Hydration (Selective & Progressive Hydration):
next/dynamic과 같은 동적 임포트를 사용하여 중요하지 않은 컴포넌트의 Hydration을 지연시키고 화면 위쪽(Above-the-fold) 콘텐츠를 우선 처리합니다 [10, 11]. React 18의 동시성 렌더링(Concurrent Rendering)은 사용자가 상호작용하는 부분을 우선적으로 Hydration 할 수 있도록 지원합니다 [12]. - 뷰포트 기반 지연 (Lazy Hydration):
IntersectionObserverAPI 등을 활용하여 컴포넌트가 화면에 보일 때만 Hydration을 수행함으로써 초기 TBT를 대폭 줄입니다 [11]. - React Server Components (RSC) 도입: 서버 컴포넌트는 오직 서버에서만 실행되며 클라이언트로 JavaScript를 전송하지 않습니다. 따라서 상호작용이 필요 없는 정적 UI의 경우 Hydration 과정 자체가 필요 없어 번들 크기 및 실행 오버헤드를 근본적으로 제거할 수 있습니다 [13, 14].
- 선택적 및 점진적 Hydration (Selective & Progressive Hydration):
🔗 Knowledge Connections
- Related Topics: Server-Side Rendering (SSR), React Server Components (RSC), Time to Interactive (TTI), Total Blocking Time (TBT)
- Projects/Contexts: Next.js 렌더링 최적화, React 18 동시성 렌더링 (Concurrent Rendering)
- Contradictions/Notes: SSR은 초기 콘텐츠를 즉시 렌더링하여 SEO와 FCP(First Contentful Paint)를 향상시키는 장점이 있지만, Hydration 완료 전까지 페이지 조작이 불가능하여 TTI가 지연된다는 뚜렷한 트레이드오프가 존재합니다 [5, 15, 16]. 그러나 React Server Components(RSC)나 선택적 Hydration 기법을 활용하면 인터랙티브한 부분에만 클라이언트 코드를 적용할 수 있어 이러한 SSR의 한계를 상쇄할 수 있습니다 [12, 17].
Last updated: 2026-04-25