Hydration이란?

• 하이드레이션(Hydration)이란 서버에서 미리 렌더링(SSR)된 정적인 HTML에 React가 이벤트 핸들러와 상태 관리 로직을 연결하는 과정입니다.

• 서버 컴포넌트나 SSR을 통해 클라이언트로 전송된 HTML은 단순한 문자열로, 사용자의 상호작용(클릭, 입력)에 반응하지 않습니다.

• 이런 HTML에 React의 클라이언트 사이드 렌더링 로직을 결합하는 것이 바로 Hydration입니다.

---

Hydration 과정 상세

1. 서버에서 렌더링
   • 예를 들어, page.tsx가 서버 컴포넌트와 클라이언트 컴포넌트를 혼합해 만든 HTML을 서버에서 생성합니다.
   • 이 HTML은 상태나 이벤트 핸들러 없이 순수한 마크업입니다.
2. HTML 전송 및 표시
   • 브라우저는 이 HTML을 받아 즉시 화면에 표시합니다.
   • 사용자는 페이지 레이아웃, 텍스트, 이미지 등을 바로 볼 수 있습니다.
   • 이 시점에서 사용자는 UI를 볼 수 있지만, React측 이벤트 핸들러나 상태 업데이트 로직은 아직 동작하지 않습니다.
3. 클라이언트 측 스크립트 로드
   • 브라우저는 별도로 전송된 클라이언트 컴포넌트 번들(자바스크립트 파일)을 다운로드하고 실행합니다.
   • 여기에는 해당 클라이언트 컴포넌트들이 상태 관리 훅(useState, useEffect)이나 이벤트 핸들러(onClick, onChange) 같은 로직을 포함하고 있습니다.
4. Hydration 진행
   • React는 서버에서 내려받은 HTML을 바탕으로 가상 DOM을 구성한 뒤, 이 가상 DOM과 실제 DOM을 비교하여 이벤트 핸들러를 연결합니다.
   • 이로써 HTML요소들이 반응형(Interactive)이 됩니다.
   • 예를 들어, <button onClick={...}>와 같이 정의된 클라이언트 컴포넌트의 버튼은 이제 클릭 시 실제로 이벤트가 발생하고, 상태가 변하며, UI 갱신이 일어납니다.

---

Hydration 시 발생할 수 있는 문제들:

• HTML 불일치 경고(Mismatch):
  
• 서버에서 렌더링된 HTML과 클라이언트가 렌더링하는 결과가 다르면 경고가 발생합니다.
  • 예를 들어, 서버에서는 div 안에 "Hello"라는 텍스트를 렌더링했는데, 클라이언트 초기 상태에서는 "Hi"라고 렌더링한다면, Hydration시, "일관성이 없다"며 경고 메시지를 띄울 수 있습니다.

🤾 이 문제를 피하려면, 서버와 클라이언트가 동일한 초기 상태를 가질 수 있도록 해야 합니다.

예를 들어, SSR로 페이지를 구성할 때 사용한 데이터와 클라이언트 측 초기 상태 데이터가 동일하도록 설정하거나, 렌더링 시점에 따라 시계가 바뀌는 데이터(Date.now()) 같은 것을 유의해서 사용해야 합니다.

• 성능 비용:
  • Hydration 자체가 추가적인 연산이므로, 너무 많은 컴포넌트를 클라이언트 컴포넌트로 만드는 것은 성능에 불리합니다.
  • 가능한 한 서버 컴포넌트를 최대한 활용해 클라이언트로 전송되는 자바스크립트를 최소화하고, 그에 따라 Hydration비용도 줄일 수 있습니다.

잘 활용하는 방법:

• 서버 컴포넌트로 가능한 한 많은 부분 처리, 클라이언트 컴포넌트 최소화
  • 정적 콘텐츠나 SEO가 중요한 부분은 서버 컴포넌트로 렌더링해서 초기 표시를 빠르게 하고, JS번들을 줄여 Hydration부담도 줄입니다.
• 상호작용이 필요한 부분(버튼, 폼, 모달)만 클라이언트 컴포넌트로 만들면, Hydration되는 영역도 최소화됩니다.
• 이렇게 하면 성능과 유지보수성도 향상됩니다.

---