하이드레이션은 서버가 미리 그려 보낸 ‘정적인 그림’ 같은 HTML에, 브라우저에 도착한 자바스크립트가 동일한 컴포넌트 트리를 다시 실행하며 이벤트 리스너와 상태를 붙여 넣는 과정이다. 이 과정이 끝나기 전까지는 화면이 보여도 버튼을 눌러도 반응하지 않는 경우가 있어, 사용자가 느끼는 ‘먹통’ 현상의 주요 원인이 된다. Astro의 아일랜드 아키텍처나 React 18의 선택적 하이드레이션(Selective Hydration)은 이 문제를 완화하기 위해 등장한 대표적인 기술적 해법이다.
실무 적용 및 비즈니스 영향
- 초기 렌더링 속도와 사용자 인터랙션 간의 완벽한 기능적 브릿지 역할 수행
구현 가이드 및 주의사항
- 하이드레이션 지연 시 클릭 반응성(INP/TBT)이 악화되므로 JS 코드 분할 필수