하이드레이션 (hydration)

server side rendering 의 과정은..서버에서 렌더링 된 정적 페이지를 클라이언트에게 보내고, 리액트는 번들링 된 자바스크립트 코드를 클라이언트에게 보낸다.
이 때, 클라이언트는 전달받는 HTML과 JS코드를 매칭하는 Hydrate를 수행한다.
- 여기서 JS 코드는 뭘까?
  - 리액트 어플리케이션을 번들링한 자바스크립트 코드!
Hydrate를 통해서, 전달받은 JavaScript들이 이전에 보내진 HTML DOM요소 위에서 한번 더 렌더링하게 되면서 각각 자리를 찾아가며 매칭하게 되는 것이다.
Hydrate 이후에는 클릭과 같은 이벤트나 모듈들이 적용되어 사용자 인터렉션이 가능해진다.
즉, Hydrate는 클라이언트 측 JavaScript가 정적 호스팅 또는 서버 측 렌더링을 통해 전달되는 정적 HTML요소에 이벤트 핸들러를 첨부하여, 동적 웹 페이지로 변환하는 기술이다.
즉, SSR 덕분에 사용자는 UI를 먼저 볼 수 있는거고 Hydrate 덕분에 JS 코드가 매칭되어 사용자 조작이 가능해지는 것.
즉, 이벤트 핸들러 함수들을 정적인 DOM 노드에 부착하여 동적으로 상호작용(인터렉션)이 가능하도록 하는 것

React18에서의 hydration 변경점

한번 하이드레이션이 시작되면 전체 트리가 완전히 하이드레이션 되기 전까지는 유저는 다른 곳의 UI Interaction이 불가능했다.
그래서 React 는 이런점을 18버전에서 변경이 되었는데,
하이드레이션이 필요한 곳만 Suspense로 감싸주어, 리액트는 나머지 해당 부분을 기다리지 않고 나머지 페이지에 HTML 스트리밍을 할 수 있다.

1. HTML 스트리밍

서버에서 HTML을 스트리밍 형식으로 전달한다.
즉, SSR 과정에서 클라이언트로 HTML을 점진적으로 보내는 기술
이를 통해서 클라이언트는 서버에서 전체 HTML을 다 받을 때 까지 기다리지 않고, 부분적으로 HTML을 받아 렌더링 할 수 있게 한다.
이를 통해 페이지 로딩 시간을 단축하고, 사용자 경험을 개선 할 수 있다.

```jsx
<div hidden id="서버사이드렌더링되는부분">
  <!-- Comments -->
  <p>데이터</p>
</div>
<script>
  // This implementation is slightly simplified
  document
    .getElementById("sections-spinner")
    .replaceChildren(document.getElementById("서버사이드렌더링되는부분"));
</script>

그리고 서버단에서 서버사이드렌더링을 하는 데이터가 준비되면, React는 동일한 스트림에 추가되는 HTM과, HTML을 올바른 장소에 위치시키기 위한 인라인 script 태그를 보내준다.

2. 선택적 하이드레이션 (Selective Hydration)

기본 하이드레이션에서는 페이지의 모든 컨텐츠가 한번에 하이드레이션 된다.
하지만, 큰 페이지나 복잡한 어플리케이션에서 성능문제가 있음.
선택적 하이드레이션은 이를 해결하기 위함
lazy , 코드스플릿팅을 사용해서 특정 항목에 대한 로드를 지연할 수 있다.
이를 통해 메인 번들에서 분리 가능하다.

3. 하이드레이션 우선순위 조정

React 는 트리상 먼저 발견되는 부분부터 하이드레이션을 시작한다.
하지만, 이 때 유저가 어떤 부분을 먼저 클릭한다면, 리액트는 해당 클릭을 기록 한 후 해당 항목에 대한 하이드레이션에 우선순위를 부여한다.

즉 리액트 18에서는

HTML 스트리밍은 가장 빠른 시점에서부터 HTML을 생성할 수 있게 해주고, 추가적인 컨텐츠는 해당 장소에 컨텐츠가 갈 수 있도록 <script> 태그와 함께 스트리밍 형태로 보내주게 된다.
선택적 하이드레이션은 애플리케이션의 나머지 HTML 과 JavaScript가 완전히 다운로드 되기 전에, 하이드레이션을 최대한 빨리 시작할 수 있게 해준다.
하이드레이션 우선순위 조정을 통해 즉각적으로 하이드레이션이 이뤄지는 것 같은 착각을 일으킨다.\