[Next.js] Hydration을 알아보자

회사에서 Next.js 기반의 프로젝트를 맡게 되어 태스크를 처리 하던 중,
Hydration의 원리가 궁금해져 공부와 함께 기록을 남긴다.

---

# Hydration이란?

참조 : Monica Powell article

Keeping Server-Side Rendering Cool With React Hydration

 

먼저, Hydration란 Next.js의 주요 동작 원리 중 하나로 서버사이드에서 렌더링 된 정적 페이지와 번들링 된 Javascript를 서로 매칭(?)시키는 과정을 의미한다.

 

Hydration는 Next.js에 종속된 개념이 아닌 무려 React의 ReactDOM에 존재하는 모듈이다.
(지금까지 render()만 사용하고 있었다...)
참조 : React 공식문서 ReactDOM

ReactDOM – React

 

좀 더 자세히 알기 위해서는, React의 동작 원리를 이해해야한다.

 

React는 CSR을 하기 위해서 보통, 뼈대가 되는 한 HTML 파일안에 id=”root”인 div 태그를 남겨두고, 오직 그 안에서 Javascript로 모든 것을 처리한다.

 

반면, Next.js는 SSR을 하기 위해서 미리 HTML 구성을 Pre-rendering한 후, 생성된 HTML 파일을 클라이언트로 전송하는데,
이 때 클라이언트가 받은 HTML 파일은 EventListener 등과 같은 각종 Javascript 코드가 적용되지 않은 상태이다.

 

이 문제를 해결하기 위해, Hydration를 적용하는데 Next.js 서버가 Pre-rendering 된 HTMl 파일을 클라이언트에 전송하자 마자, 번들링 된 Javascript 코드들을 곧바로 클라이언트에 전송하고, 이 번들링된 Javascript 코드들이 HTML DOM 위에서 한번 더 rendering되어 각기 제 위치에 매칭이 되게 된다.
이 과정을 통해 정상적으로 웹 페이지가 동작을 하게 되며, 해당 과정을 바로 Hydration이라고 하는 것이다.

위 캡처를 보자,
Next.js 프로젝트인 김캐디 웹사이트이다.
개발자 도구의 Network 탭을 열어 보면 Hydration 과정의 순서를 볼 수 있는데,

 

첫 번째, 빨간 박스를 보면 HTML 파일이 받아졌고,
두 번째, 파란 박스를 보면 CSS 파일이 받아졌고,
마지막, 노란 박스에 번들링 된 Javascript 파일이 받아진 것을 볼 수 있다!