Hydration

Hydration이란?

JS 코드들이 DOM 요소 위에 물을 채우듯이 필요로 하는 요소들을 채운다 하여 Hydrate(수화)라는 용어를 쓴다.

Hydration이란 서버에서 Pre-Rendering 된 정적 페이지를 다시 React Tree에 맞게 파싱하는 행위이다.

이 과정은 2단계로 이루어진다.

1. 렌더링된 결과물이 어떤 컴포넌트와 매칭되는지 확인

2. 각 컴포넌트에 걸린 Event를 실제 DOM에 연결

각 DOM 요소에 JS코드를 매칭시키기 위한 목적이므로 페이지를 다시 그리는 Paint 과정은 일어나지 않는다.

ReactDOM.hydrateRoot()

import { hydrateRoot } from 'react-dom/client';

const container = document.getElementById('root');
const root = hydrateRoot(container);

root.render(<App/>);

Next.js 내부적으로 동작하는 ReactDOM.hydrateRoot()는 다음과 같은 일을 한다.

• 서버에서 프리 렌더링된 DOM Tree와 클라이언트에서 렌더링한 React Tree를 비교한다.

• 비교하면서 각 DOM이 어떤 컴포넌트와 매칭되는지 이해한다.

• 이해한 내용에 따라 이벤트를 연결하고, CSR 동작이 이루어진다.

매칭하는 과정에서 요소의 Text나 attribute는 신경쓰지 않고 렌더링된 요소의 타입과 순서만을 비교한다.