Hydration

React에서 제공하는 hydration이라는 것의 정의와 어떤 방식으로 동작하는 지 알아보자

hydration이란?

hydration은 사전적 정의로는 수화(몸에 수분을 보충해주는 행위, 손가락 대화의 수화가 아님)라고 말한다.

그렇다면 이 의미가 JS와 React에서는 어떤 의미로 받아들여지는가를 보면

hydrateRoot는 react-dom/server를 통해 사전에 만들어진 HTML로 그려진 브라우저 DOM 노드 내부에 React 컴포넌트를 렌더링한다.

라고 정의하고 있다.

Next.js 같은 SSR framework들에서는 서버에서 캐싱을 위해 or 다른 이유로 HTML 페이지를 만들고 클라이언트로 먼저 전달한 다음 JS들을 연동시켜주는 작업을 수행하곤 한다. 그런 작업이 수행된 이후 우리가 정상적으로 페이지를 볼 수 있는 것이다.

왜 이런 작업을 해주는 것일까?

react-dom/server를 이용하면 리액트 컴포넌트를 서버 단위에서 HTML로 렌더링할 수 있는 작업을 수행해준다.

이런 작업이 필요한 이유는 예상되는 여러가지가 존재하는데 다음과 같다

• SEO: SEO 크롤링 때 단순 CSR인 경우에는 <div id="root" /> element만 보니 SEO에 자칫 불리할 수 있으니 먼저 HTML만 렌더하는 경우
• 성능: CSR 중 하나인 리액트에서는 모든 렌더링을 JS에서 관리하게 된다. 이렇게 되는 경우 JS를 다 받아와야만 화면을 렌더링하기 때문에 유저의 네트워크가 느리게 되면 빈화면 or 로딩 화면을 볼 수 밖에 없다. 유저 관점에서는 좋지 않을 수 있어 HTML, CSS만 먼저 보여주고 그 후 JS를 불러와 hydration을 거쳐 완벽한 페이지를 보여주는 방법을 택할 수 있다.