NextJS Hydration
💧 Hydration이란?
정의
Hydration은 서버나 정적 호스팅으로 받은 HTML에 React 동작을 입혀 인터랙티브한 상태로 만드는 과정이다.
초기에는 HTML로 화면을 보여주고, 이후 React가 붙으면서 버튼 클릭이나 상태 변경 같은 동작이 가능해진다.
🔄 Hydration 과정
- 사용자가 페이지를 요청한다.
- 브라우저는 서버에서 받은 HTML을 먼저 렌더링한다.
- 동시에 React가 백그라운드에서 컴포넌트를 초기화한다.
- 초기화가 끝나면 React가 이벤트와 상태를 연결한다.
- 사용자는 정적 화면을 보다가 점점 동적인 화면을 사용하게 된다.
🧩 특징
- 첫 화면은 HTML 기반으로 빠르게 보여줄 수 있다.
- 이후 React가 동작을 붙이기 때문에 인터랙션이 가능해진다.
- SSR과 함께 설명되는 경우가 많다.
- Hydration이 느리면 화면은 보이지만 조작이 바로 안 되는 상태가 길어질 수 있다.
📌 정리
- Hydration은 서버에서 받은 HTML을 React가 살아있는 화면으로 바꾸는 과정이다.
- NextJS에서는 SSR과 함께 자주 언급된다.
- 초기 화면 표시와 인터랙션 연결을 이해하는 데 중요한 개념이다.
댓글남기기