Next.js에서의 중요한 개념으로 “hydrate”, “hydration”이 나와서 매번 찾아보는데도 잘 기억되지 않는다.
(1) Next.js 서버에서 리액트를 실행하고, 초기 데이터를 포함하는 HTML 정적 파일을 생성하는 것.
(2) 정적으로 생성된 HTML 파일에 JavaScript 요소를 연결시키는 것.
게다가 hydrate를 찾아보면 알 수 있는 이 개념들..여기서 (1)과 (2) 중 어느 개념이 hydrate일까?
혹은 (1), (2)를 모두 포함하는 개념일까?
결론만 말하자면 (2)가 hydration에 대한 내용이다.
hydrate를 위해 필요한 일련의 선행 과정이 (1)이 되는 것이다.
따라서 Next.js에서의 렌더링 전체 과정은 (1) -> 정적 HTML 파일 렌더링 -> (2)가 된다.
Next.js의 hydrate()을 타고 들어가면 리액트의 ReactDOM.hydrate()로 이어진다. (리액트 18부터는 hydrateRoot())
Next.js에서 새롭게 적용된 내용이 아니라, 리액트 DOM 함수에서 제공하는 기능이지만 각 프레임워크에서 개발자가 사용하기 쉽게 구현해서 제공함을 알 수 있다.
리액트 공식문서에서 hydrate에 대한 문서를 볼 수 있다. hydrateRoot
리액트만 사용할 때는 서버에서 생성해주는 HTML 파일이 없기 때문에 createRoot()를 기본으로 사용하고 있다.
하지만 Next.js처럼 서버에서 HTML 파일을 생성해서 보내주는 경우에는, 이를 렌더링하고 여기에 JS를 붙이는 hydrateRoot() 작업을 하게 되는 것이다.
이것이 주로 React가 아닌 Next.js와 함께 hydration이 언급되는 이유다.
Next.js에서는 기본적으로 서버 라는 개념이 게속 등장한다.
여기서 서버는 우리가 흔히 생각하는 자바 스프링 같은 백엔드 서버가 아닌, 프론트엔드 서버를 의미한다.
이 프론트 서버(Next.js에는 자체 서버가 내장되어 있다)에서 미리 HTML 파일을 생성해서 넘겨주므로 그 파일에 JS를 붙이기 위해 hydration 개념이 함께 짝꿍처럼 등장하는 것이다.
Next.js에서 SSR, SSG, CSR을 모두 사용할 수 있는데,
서버에서 정적 파일을 생성해서 보내준다는 공통점을 가진 SSR과 SSG에 주로 hydrate가 적용된다.
CSR은 기존의 리액트와 동일하게 hydrate보다는 render의 개념이 적용된다.
그리고 이 hydrate는 클라이언트 측에서 실행되며,
따라서 React에서도 해당 함수는 Client API로 분류된다.
hydration이라는 용어에 대한 설명으로 메마른 HTML 파일에 수분을 공급하는 것이다. 라는 내용이 많던데,
(화학을 배웠던 입장으로) 해석하기로는 정적 요소로 이뤄져 있는 HTML 파일의 곳곳에 JS(H2O)가 반응하여 결합해 다시 하나의 분자(파일)가 되는 뭐 그런 느낌으로 이해했다.
본인이 개념을 이해하고, 익숙하게 느껴지는 방식으로 해석해서 기억해두면 되겠다.