Skip to main content

Hydration

하이드레이션(Hydration)은 넥스트 공식 문서에서 자주 언급되는 개념입니다. Hydrate, Hydrating 등 심심치 않게 등장하는 걸 볼 수 있습니다.

Hydration 소개​

하이드레이션이란 서버에서 그려준 HTML 파일에 리액트가 해당 HTML 코드의 DOM을 제어할 수 있도록 붙여주는 작업을 의미합니다. 하이드레이트(hydrate)라는 단어의 뜻은 "적시다, 수분을 주다"라는 의미입니다. 이 용어의 뜻을 비춰봤을 때 서버에서 만든 정적 HTML 페이지에 물을 줘서 마치 살아있는 HTML 페이지처럼 동적으로 만든다고 비유할 수 있습니다.

Hydration 예시 코드​

하이드레이션은 정확히 넥스트에서만 존재하는 개념은 아닙니다. 리액트의 공식 API인 hydrate()를 이용하여 넥스트 내부적으로 하이드레이션을 해줄 뿐이죠. 따라서, 리액트의 hydrate() API 코드가 어떻게 생겼는지 살펴보겠습니다.

import { hydrate } from 'react-dom';

hydrate(<App />, document.getElementById('root'));

위 코드는 아래와 같은 HTML 문서가 있을 때 <App/> 이라는 리액트 컴포넌트를 하이드레이션 하는 코드입니다.

<body>
  <div id="root">
    <h1>캡틴판교가 알려주는 하이드레이션</h1>
  </div>
</body>

서버에서 위와 같은 HTML 파일을 주었을 때 <App> 컴포넌트를 하이드레이션 하려면 <App> 컴포넌트 내용이 #root 태그의 하위 요소의 내용이 같아야 합니다.

components/App.jsx
function App() {
  return <h1>캡틴판교가 알려주는 하이드레이션</h1>;
}

이 App 컴포넌트는 useState와 같은 상태가 없이 단순히 h1 태그와 텍스트만 정의되어 있어서 왜 하이드레이션을 해야하지? 라고 생각할 수 있습니다.

그렇다면 하이드레이션의 목적을 이해하기 위해 아래와 같이 바꿔볼게요.

components/App.jsx
function App() {
  const [title, setTitle] = useState('캡틴판교가 알려주는 하이드레이션');
  return <h1>{title}</h1>;
}

위와 같이 useState()로 title 이라는 상태를 하나 정의한 후 좀 전과 같은 UI가 표시되도록 바꿔봤습니다. 이렇게 하면 <h1>캡틴판교가 알려주는 하이드레이션</h1> 라는 코드는 이제 리액트에서 상태로 텍스트를 관리한 후 화면에 표시하게 됩니다.

여기서는 단순히 텍스트에 대한 상태만 표시해 보았는데, 인풋과 버튼 등 사용자와 인터렉션 할 수 있는 코드들을 모두 추가할 수 있죠. 다시 생각해 보면 서버에서 그려준 HTML 파일은 리액트가 관여하지 않는 파일인거고, 그 HTML 파일에서 사용자 인터렉션을 처리하기 위해서는 리액트가 필요합니다. 따라서, 하이드레이션을 이용하여 서버가 그려준 HTML 페이지에 리액트로 숨을 불어넣어주는 것. 그게 바로 하이드레이션입니다.

warning

리액트 v17까지는 하이드레이션을 위해 hydrate() API를 사용했습니다. 리액트 v18부터는 hydrateRoot() API를 사용해야 합니다.