Hydration

SSR/SSG로 내려온 HTML에 JS 이벤트를 연결해 인터랙션을 활성화하는 과정

분야: 프론트엔드 시리즈: 렌더링 전략 frontendrenderingjavascript

Hydration은 서버(SSR/SSG)가 내려준 HTML을 “정적 문서”에서 “인터랙티브 앱”으로 바꾸는 과정입니다.

실무 포인트

  • hydration 비용이 커지면 초기 성능이 나빠질 수 있습니다.
  • 일부 UI만 부분적으로 하이드레이션하는 전략(아일랜드 아키텍처 등)을 쓰기도 합니다.

관련 문서

Code Splitting
코드를 여러 청크로 분리해 필요한 시점에만 로드하는 최적화
CSR (Client-Side Rendering)
브라우저에서 JavaScript로 화면을 렌더링하는 방식
SSG (Static Site Generation)
빌드 시점에 HTML을 생성해 정적으로 배포하는 방식
SSR (Server-Side Rendering)
서버에서 HTML을 렌더링해 초기 응답을 만드는 방식
Tree Shaking
사용하지 않는 코드를 번들에서 제거해 용량을 줄이는 최적화