hydration

🐢 hydration에 대해서

서버가 미리 만들어서 보내준 HTML에 브라우저가 javascript 기능을 다시 붙여서
인터랙션 가능한 상태가 되는 것

과정 :
1. 서버가 html을 렌더링해서 보냄
2. js가 다 안떠도 사용자는 일단 화면을 빨리 보는게 가능
3. js가 로드됨
4. 기존 html을 보고 연결 작업을 함
5. 클릭, 입력, 상태 변경등이 정상 작동함

-> 처음 화면은 빠르게 보여주고, 나중에 동작을 붙이는 방식!

만약에 CSR만 쓴다면,
처음엔 빈 div만 받고 js 다 받아야 화면이 뜰 수 있음.
근데 SSR + hydration이면? 일단 빠르게 화면 확인을 할 수 있는거임

https://react.dev/reference/react-dom/client/hydrateRoot

hydrateRoot로 리액트에서 어떻게 html에 리액트 붙이는지 설명해줌..
처음엔 이해가 좀 어려웠음

예시 )

//index.js

import './styles.css';
import { hydrateRoot } from 'react-dom/client';
import App from './App.js';

hydrateRoot(
  document.getElementById('root'),
  <App />
);

//index.html
<!--
  HTML content inside <div id="root">...</div>
  was generated from App by react-dom/server.
-->
<div id="root"><h1>Hello, world!</h1><button>You clicked me <!-- -->0<!-- --> times</button></div>

//App.js

import { useState } from 'react';

export default function App() {
  return (
    <>
      <h1>Hello, world!</h1>
      <Counter />
    </>
  );
}

function Counter() {
  const [count, setCount] = useState(0);
  return (
    <button onClick={() => setCount(count + 1)}>
      You clicked me {count} times
    </button>
  );
}

이걸보면 알수있는건
보통 CSR이라면 첨에 root안에 빈껍데기가 들어있겠지만 hydrateRoot를 쓴다면 이미 Hello, world! 어쩌고가 있는 html이 들어와있는거임

내가 처음에 hydration개념을 들었을 때는 아 첨에 서버에서 보내준 html에서 id나 class를 가져온뒤 컴포넌트랑 연결하는 식이겠구나... 이렇게 예상했는데 그게 아니었음

그냥 CSR과 비슷하게 코드작성하고 hydrateRoot만 하면, 거기에 맞춰서 먼저 html로 내려주고 js가 로드되고 나서 그 DOM 구조, 텍스트, 조건부 렌더링 등을 비교하면서 연결되는 거임.

그런데, 서버에서 내려준 html과 클라이언트의 첫렌더 결과가 다를 때 어긋남이 발생할 수 있음 이걸 hydration mismatch라고 한다고 함

🍀 hydration mismatch란 ?

서버가 만든 html이랑 js가 처음 렌더링한 결과가 다를 때 생김.

텍스트가 조금 다르거나, 서버와 클라이언트에서 보는 구조가 크게 다를 때 hydration 과정에서 어긋나는 상태를 말함

이 경우 경고가 뜨거나, 깨지거나, 서버에서 내려준 html을 버리고 클라이언트 렌더링으로 전환될수있음

예를들어 회원 종류에 따라 UI를 다르게 보여줘야한다고 하자

곰 회원인 경우 BearPage를 보여줘야하고
곰회원이 아닌 경우 AllPage를 보여줘야함

function Page() {
  const isBear = localStorage.getItem('isBear') === 'true';
  return isBear ? <BearPage /> : <AllPage />;
}

이걸 위해 이렇게 작성해둔다면?
서버는 로컬스토리지에서 값을 못읽어서 AllPage 렌더할수도 있음

근데 사실 곰이었더라면..?
서버 html과 클라이언트에서의 렌더결과의 불일치로 고장날수있음

이를 위해선 서버에서도 isBear값을 정확히 알수있게하거나 아예 공통 페이지를 만들어서 fallback UI로 쓰거나 이런 전략을 펼칠 수 있을거임

아무튼 UX에 정말 좋은 방법같음
인터넷이 느린환경에서도 어찌됐든 뭔가 보인다는건 너무좋은거고..
언젠간 해봐야지

끝