[Next.js] Hydration이란?

 

Hydration

Next.js 화면이 렌더링되는 과정에서, JS 코드들이 HTML DOM 요소들과 매칭되는 것

 

 

Next.js의 SSR 동작 방식

 

Hydration을 이해하기 위해선 Next.js의 SSR를 이해하는 게 필요하다.

 

 

 

SSR (Server Side Rendering)

이름에서 알 수 있다시피, 서버에서 화면을 렌더링하는 방식이다.

정확히 말하면, 서버에서 pre-rendering된 HTML Document 파일을 클라이언트에 전송하고,

클라이언트 페이지는 이를 바로 보여주는 형식이다.

이 때 넘겨받은 파일은 정적인 DOM 파일로, interactive한 기능이 없는 껍데기 파일이다.

이후에 JS파일을 넘겨받아 동적인 페이지를 완성한다.

 

이 과정을 Vercel 홈페이지에서 살펴보면 다음과 같다.

 

 

 

네트워크 내역을 보면 'vercel.com'이라는 HTML DOM 파일이 첫 번째로 로드되었고, 이후에 여러 JS 스크립트들이 로드된 것을 확인할 수 있다. 

 

 

그렇다면 Hydration이란?

Hydration은 나중에 로드된 JS파일들이 미리 로드된 HTML DOM 요소들과 매칭되는 것을 말한다.

예를 들어 DOM의 특정 버튼이 팝업창을 띄우는 역할을 해야 한다면, 이 기능이 쓰여진 JS 코드가 DOM Tree에 있는 이 버튼에 매칭되는 것이다.

 

 

Pre-rendering과 Hydration이 분리되는 이유

Next.js에서 pre-rendering과 hydration을 분리한 이유는 프리렌더링을 통해 유저에게 화면을 빠르게 보여주기 위해서이다. 프리렌더링 과정에서 만들어진 HTML 파일은 JS 요소들이 빠져있어 빠른 로딩이 가능하다.

이후에 JS 파일을 추가하는 Hydration 과정에선 실제 웹페이지를 그리는 Paint 함수가 호출되지 않아, 마찬가지로 긴 시간이 소요되지 않는다.

 

 

 

ReactDOM 함수로 살펴보는 Hydrate

Next.js에서는 ReactDOM 함수를 통해 hydration을 처리하고 있다. hydrate() 함수를 render() 함수와 비교해보면 그 역할을 더 명확히 알 수 있다.

 

 

render()

ReactDOM.render(element, container[,callback]);

render() 함수에선 첫번째 인자로 받은 element를 두 번째 인자의 container의 하위 컴포넌트로 주입해 렌더링한다.

그리고 세 번째 인자에 콜백함수를 넣어 렌더링이 완료되면 특정 이벤트를 실행시킬 수 있다.

 

 

hydrate()

ReactDOM.hydrate(element, container[,callback]);

반면 hydrate() 함수는 이미 마크업 처리되어 있는 첫 번째, 두 번째 인자에 세 번째 인자인 콜백함수를 붙여주는 역할을 수행한다. 이미 렌더링되어 있는 DOM 요소에 JS코드(이벤트리스너 등)을 부착시키는 것이다.

이 과정에서 렌더링된 DOM tree와 서버 상의 DOM tree를 비교해 어느 DOM 요소를 찾아가야 하는지 매칭한다.

 

 

 

Hydration과 관련된 이슈

Hydration과 관련해서는 몇 가지 이슈가 있는데, 가장 대표적인 것은 DOM tree 매칭 과정에서 속성/class/id를 인식하지 못해 발생하는 문제다. 이 과정에서 특정 DOM 요소에 적용되어야 할 스타일 요소가 다른 곳에 적용되는 등의 문제가 발생할 수 있다.

 

또 다른 이슈는 굳이 JS가 필요하지 않은 영역까지 불러와서 Full Hydration을 한다는 점이다. 사실 DOM tree에서 JS 기능이 붙는 영역은 한정적이기 때문에 전체 DOM tree를 다시 비교할 필요는 없다. 이 때문에 최근 Next.js 13에서는 Client Component/Server Component를 함께 사용하는 하이브리드형 페이지를 통해 Client Component에서만 Hydration을 수행하도록 했다.

 

 

 

 

 

 

Reference

https://helloinyong.tistory.com/315

Next.js의 Hydrate란?

https://fourwingsy.medium.com/next-js-hydration-%EC%8A%A4%ED%83%80%EC%9D%BC-%EC%9D%B4%EC%8A%88-%ED%94%BC%ED%95%B4%EA%B0%80%EA%B8%B0-988ce0d939e7

Next.JS hydration 스타일 이슈 피해가기