프론트엔드에서 하이드레이션(Hydration)이란?

하이드레이션(Hydration) 개념

하이드레이션(Hydration)은 프론트엔드 개발에서 서버사이드 렌더링(SSR, Server-Side Rendering)과 관련된 중요한 개념이다. 서버사이드 렌더링은 웹 페이지를 서버에서 미리 렌더링하여 클라이언트에게 HTML을 전달하는 방식이다. 이때 클라이언트 측에서 자바스크립트를 통해 추가적인 기능(예: 이벤트 처리, 상태 관리 등)을 활성화하는 과정을 하이드레이션이라고 한다.

왜 하이드레이션이 필요한가?

1. 빠른 초기 로드:

   • 서버사이드 렌더링을 통해 브라우저는 즉시 HTML을 표시할 수 있어 초기 로드 속도가 빠르다.
   • 사용자는 화면이 빠르게 표시되는 경험을 할 수 있다.

2. 동적 상호작용 가능:

   • 서버가 렌더링한 HTML만으로는 버튼 클릭, 폼 제출 등 동적 상호작용이 불가능하다.
   • 하이드레이션 과정에서 자바스크립트가 로드되고 이벤트 리스너가 부착되어 동적 기능이 활성화된다.

3. SEO:

   • 서버사이드 렌더링된 HTML은 검색 엔진 크롤러가 쉽게 읽을 수 있어 SEO에 유리하다.

하이드레이션의 동작 방식

1. 서버사이드 렌더링 (SSR):

   • 서버에서 미리 렌더링된 HTML이 클라이언트에게 전달됨.
   • 이 HTML은 이미 완성된 구조를 가지고 있으나, 자바스크립트 로직은 아직 적용되지 않은 상태임.

2. 하이드레이션:

   • 클라이언트 측에서 자바스크립트가 로드됨.
   • 자바스크립트는 기존의 HTML과 연결되어 이벤트 리스너, 상태 관리, 기타 동적 기능을 활성화함.
   • 이 과정을 통해 서버에서 받은 정적인 HTML이 클라이언트 측에서 동적인 웹 애플리케이션으로 변환됨.

하이드레이션 예시

예시: React 애플리케이션

1. 서버사이드 렌더링 단계:

   import ReactDOMServer from 'react-dom/server';
   import App from './App';
   
   // 서버에서 React 컴포넌트를 HTML로 렌더링
   const html = ReactDOMServer.renderToString(<App />);

   • 서버는 <App /> 컴포넌트를 HTML 문자열로 렌더링하여 클라이언트에 전송함.
   • 클라이언트는 이 HTML을 받아서 화면에 표시함.

2. 클라이언트에서 하이드레이션 단계:

   import ReactDOM from 'react-dom';
   import App from './App';
   
   // 클라이언트에서 기존 HTML을 하이드레이션
   ReactDOM.hydrate(<App />, document.getElementById('root'));

   • 클라이언트는 서버에서 받은 HTML을 기반으로 하이드레이션을 수행함.
   • ReactDOM.hydrate()는 서버에서 렌더링된 HTML을 가져와서 React의 동적 기능(상태 관리, 이벤트 처리)을 활성화함.
   • 이 과정에서 이미 존재하는 DOM을 재사용하며, 변경이 필요한 부분만 업데이트함.

요약

하이드레이션은 서버에서 미리 렌더링된 HTML을 클라이언트 측에서 자바스크립트를 통해 동적으로 활성화하는 과정이다. 이를 통해 사용자에게 빠른 초기 로드 속도를 제공하면서도 동적 상호작용이 가능한 웹 애플리케이션을 제공할 수 있다. React와 같은 라이브러리에서 하이드레이션은 SSR과 클라이언트 측 렌더링을 연결해주는 중요한 역할을 한다.