Hydrate란
요약
리액트에서 Hydrate는 서버에서 SSR 혹은 SSG을 실행한 HTML 결과물을 브라우저에서 리액트 트리에 맞게 매칭하는 과정이다.
Next js에서 새롭게 만든 것이 아닌 기존 리액트에서 지원하고 있는 함수다. 리액트에서 CSR이 아닌 SSR을 사용할 때 사용된다.
사용목적
Next js로 제작된 페이지는 미리 렌더링 된 정적 HTML을 내려 받은 후 최소한의 JS코드들을 DOM에 붙여 렌더링 함으로써 브라우저에서 새로 Paint과정을 거치지 않고 렌더링한다. 때문에 사용자에게 빠르게 화면을 보여줄 수 있다
리액트 Hydrate 공식문서
hydrate(element, container[, callback])Same as render(), but is used to hydrate a container whose HTML contents were rendered by ReactDOMServer. React will attempt to attach event listeners to the existing markup.
Hydrate는 렌더링 된 마크업(컨테이너)에 이벤트 리스너를 접착시킵니다.
However, if executed well, it may be beneficial to render a “shell” of the application on the server, and only show some of the extra widgets on the client.
서버에서 어플리케이션의 Shell을 업데이트하고 클라이언트에 일부 위젯만 렌더링하는 것이 유리할 수 있습니다. 여기서 쉘은 HTML을 의미하고 일부 위젯은 이벤트 리스너와 같은 자바스크립트 코드를 의미한다.
또한 서버에서 렌더링하고 클라이언트에서 추가적으로 렌더링하니 총 2번의 렌더링과정이 이루어진다는것을 알 수 있다.
주의사항
한 가지 방식으로만 렌더링 한다면 상관이 없지만 렌더링이 복합적으로 이루어질 경우 문제가 생길 수 있다.
In development mode, React warns about mismatches during hydration. There are no guarantees that attribute differences will be patched up in case of mismatches. This is important for performance reasons because in most apps, mismatches are rare, and so validating all markup would be prohibitively expensive.
Hydrate함수는 HTML내 속성이나 텍스트 내용은 비교하지 않습니다. 불일치 할 경우가 드물고 모든 마크업을 검증하는데는 너무 많은 비용이 들기 때문입니다.
참고자료
https://reactjs.org/docs/react-dom.html#hydrate React 공식문서
https://helloinyong.tistory.com/315 Next.js의 Hydrate란?
https://simsimjae.tistory.com/389 리액트의 hydration이란?
