Hydration이란

1. Hydration이란?

Hydration은 서버에서 생성된 HTML을 브라우저에 표시한 뒤, React가 이를 읽고 동적인 기능(이벤트 처리, 상태 관리 등)을 연결하는 과정입니다.
React 앱이 서버 사이드 렌더링(SSR) 된 경우, HTML은 빠르게 화면에 표시되지만, 이 상태에서는 동적인 기능이 작동하지 않습니다.

 

2. 왜 Hydration이 중요할까?

Hydration은 SSR과 클라이언트 렌더링의 장점을 모두 결합한 기술입니다.

• 빠른 초기 화면 표시: 서버가 완성된 HTML을 보내므로, 사용자는 빈 화면이 아닌 완성된 페이지를 바로 볼 수 있습니다.
• 동적 기능 활성화: Hydration을 통해 React의 인터랙티브한 기능(클릭, 상태 변경 등)이 동작하게 됩니다.

 

3. Hydration의 과정

1. 서버에서 HTML 생성
   React 컴포넌트를 서버에서 렌더링해 완성된 HTML을 브라우저로 전송합니다.
   브라우저는 이 HTML을 빠르게 표시합니다.
2. 브라우저에서 React 실행
   브라우저는 서버에서 받은 HTML을 읽고 React를 실행합니다.
   이 과정에서 HTML과 React 컴포넌트를 연결하며, 동적 기능(이벤트 처리 등)을 활성화합니다.
3. 완성된 React 앱
   Hydration이 끝난 후에는 사용자가 클릭, 상태 변경 등의 모든 기능을 사용할 수 있습니다.

---

4. 예시로 쉽게 이해하기

HTML과 React의 관계를 요리책과 요리사로 비유해 보겠습니다.

• HTML만 있을 때
  요리책을 보고 메뉴를 확인할 수는 있지만, 주문을 하거나 재료를 바꾸는 등 상호작용은 할 수 없습니다.
  그저 "보기만 가능한 상태"입니다.
• Hydration 후
  요리책이 준비된 상태에서, 요리사가 바로 요리를 시작할 준비를 마쳤습니다.
  이제 버튼을 눌러 요리를 주문하거나, 재료를 바꾸는 등 동적인 작업이 가능합니다.
  즉, React가 HTML에 생명력을 불어넣은 상태입니다.

---

5. Hydration에서 발생할 수 있는 문제

1. HTML 불일치 문제
   서버에서 생성된 HTML과 브라우저에서 실행된 React 결과물이 다르면, 경고나 오류가 발생할 수 있습니다.
   예: 서버는 "메뉴가 피자"라고 생각했는데, 브라우저는 "파스타"라고 생각하는 상황.
2. 성능 문제
   Hydration은 브라우저가 서버에서 받은 HTML을 다시 분석해 React와 연결하는 작업이 필요합니다.
   페이지가 복잡하거나 초기 데이터가 많을 경우, Hydration이 느려질 수 있습니다.

 

6. Hydration을 개선하는 방법

1. React.StrictMode 활용
   개발 단계에서 React가 엄격하게 코드를 검사해 HTML 불일치 문제를 조기에 발견할 수 있습니다.
2. 동적 데이터 관리
   서버와 클라이언트 데이터가 불일치하지 않도록 신경 써야 합니다.
   예: 초기 데이터를 서버와 브라우저에서 동일하게 유지.
3. 최신 기술 활용
   React 18에서는 Streaming이나 Server Components를 통해 Hydration의 성능 문제를 해결하려는 노력이 진행 중입니다.

 

7. 마무리

Hydration은 SSR로 빠르게 렌더링된 HTML에 React의 동적 기능을 추가하는 과정입니다.
이를 통해 React 앱은 초기 화면 표시 속도와 동적 기능을 모두 갖춘 완성된 상태로 사용자에게 제공됩니다.