React Hydration

Hydration는 React가 SSR을 할 수 있도록, HTML 코드와 JS 코드를 서로 매칭시켜 동적인 웹사이트를 브라우저에 렌더링하는 기술이다.

Next.js는 React에서 v16부터 제공하는 hydrate 기능을 사용해서 이러한 솔루션을 성공적으로 제공했다.

다른 말로는 서버 측에서 제공된 HTML을 재사용하고 해당 DOM 요소에 이벤트 리스너를 연결하는 작업이라고 할 수 있다.

hydrate는 ReactDOM의 함수인데 리액트 프로젝트 구축 시, 초반에 꼭 작성해주는 render 함수와 잠깐 비교해보면

ReactDOM.render는 hydration을 수행하지 않지만 ReactDOM.hydrate를 사용하여 hydration을 수행할 수 있다.

import { App } from './src/app';

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

ReactDOM.hydrate는 ReactDOM.render와 동일하게 동작하지만 서버 측에서 전달받은 HTML을 사용한다.

React Helmet

React는 싱글 페이지 애플리케이션(Single Page Application, SPA)이라, React로 구축된 웹 사이트의 경우 크롤러들이 단 하나의 파일 public/index.html 만을 읽게 된다.

이처럼 싱글 페이지 애플리케이션의 경우 각각의 페이지에 대한 정보를 읽지 못한다는 단점이 있다.

이러한 단점을 극복하기 위해서는 react-helmet 라이브러리를 이용하여 사이트에 대한 메타 태그들을 읽을 수 있게 만들 수 있다.