hydration 이란?

Next.js의 SSR 렌더링 방식은 두 단계로 구분할 수 있다.

첫번째 단계는 Pre-rendering
두번째 단계는 Hydration

Pre-rendering 단계에서는 JS를 실행하지 않은 채로 HTML element들을 먼저 렌더링 한다.
JS를 실행하여 최종적인 DOM 트리를 생성 및 렌더링하고 이벤트 등록과 같은 과정을 한 번에 하지 않고, 왜 HTML elemente들을 먼저 렌더링 할까?
가장 큰 이유는 화면을 빠르게 로드할 수 있다는 점이다. JS를 읽어들이고 읽어들인 내용을 가지고 DOM을 그리는 과정은 단순 HTML element만을 가지고 DOM을 그리는 과정보다 느리기 때문이다. 빠르게 먼저 보여줄 수 있는 부분은 먼저 보여주고 hydration 과정을 통해 최종적으로 렌더링 과정을 마치는 것이다.
두 번째 이유는 SEO 때문이다. SEO(Search Engine Optimization)를 높이기 위해서는 서버 단에서 페이지가 존재해야 한다. 그 페이지를 검색봇이 탐색하여 점수를 매겨 검색 결과의 상위에 노출할 지 하위에 노출할 지 결정한다. CSR로만 렌더링을 한다면 검색봇이 탐색할 페이지가 없기 때문에 SEO 점수는 최저일 것이다.

---

참고

https://helloinyong.tistory.com/315

https://jooonho.com/react/2022-02-20-hydration