Hydration이란?

• 전에 Next.js를 공부할 때 hydration이란 단어를 접한 적이 있었다. 그런데 근래에 Zustand 공식문서를 훑어 보다가 Hydrate라는 단어를 또 접했다.
• 둘이 같은 의미라기엔 정의가 미묘하게 달라서 헷갈리는 일이 없도록 간단하게라도 정리하기로.

---

Next.js 에서의 Hydration

• 사실 Next.js에서만 쓰는 개념은 아닌 것 같다.
  • 정확히는, SSR에서 언급되는 용어. (https://www.patterns.dev/react/server-side-rendering/)
  • React 공식 문서에도 서버에서 생성된 컨텐츠를 처리하는 hydrateRoot 가 존재한다.
    https://react.dev/reference/react-dom/client/hydrateRoot 

hydrateRoot – React

• Hydration이란, 서버측에서 생성한 HTML 컨텐츠에 React가 로직을 추가하는 과정을 의미한다.
  • 즉, 서버에서 미리 렌더링된(Pre-rendered), 정적인 상태의 HTML에 React가 이벤트 리스너 등을 추가함으로써, 컨텐츠가 진정한 웹 어플리케이션으로 기능할 수 있도록 하는 작업이다.
  • 정적 컨텐츠를 상호작용 가능한(interactive) 상태로 만들어주기 때문에, 마치 건조한 환경에 물을 줌으로써 생기를 불어넣는 행위와 비슷하다는 의미로 ‘Hydrate(수화시키다)’라는 단어를 사용한다는 것 같다.

 

 

Zustand의 Hydration

• Zustand 공식 문서에 따르면 아래와 같다.
  • 이미 지속적으로 존재하는 값들(ex. LocalStorage 등에 저장된 값)을 사용해 현재의 State를 초기화하는 것을 의미한다.
  • State를 올바른 값으로 초기화해줌으로써, 웹이 이전 상태를 기억하고 그에 맞는 행위를 할 수 있도록 하는 역할을 수행한다.
  • ex) Hydration이 이루어지지 않아, LocalStorage에는 로그인 정보가 존재함에도 State가 비어있어 웹이 비로그인 상태인 것으로 착각하는 것.
  • SSR의 Hydration과 관념적으로 비슷하게, 비어있는 State에 물을 주어 올바른 상태로 만든다는 의미에서 Hydrate라는 단어를 사용하는 것 같다.

 

 

그래서 둘은 다른가

⇒ 다른데 얽히는 경우는 있는 것 같다. Next.js의 Hydration Error가 일례인 것 같다.

https://zustand.docs.pmnd.rs/integrations/persisting-store-data#usage-in-next.js

Persisting store data - Zustand

https://nextjs.org/docs/messages/react-hydration-error

Text content does not match server-rendered HTML

 

• 서버에서 생성된 HTML 은 브라우저의 데이터를 알 수 없는 반면, 클라이언트는 브라우저에 저장된 데이터를 가져와 쓸 수 있기 때문에 초기 렌더링 된 컨텐츠가 서로 달라 에러가 발생할 수 있다.
• Zustand는 이를 해결하기 위한 방안으로, 컴포넌트를 바꾸기 전 조금 기다린 후 진행하는 커스텀 훅을 만드는 방법을 제시하고 있다. (위 링크 참조)

---

• 사용하는 용어가 같다보니 같은 개념인가 싶어 헷갈렸는데, 조금 자세히 들여다보니 차이를 이해할 수 있었다.
• 별개로 근래 Zustand를 사용해보며, 내가 그간 사용해보았던 상태 관리 라이브러리들을 쭉 정리해보고 싶다는 생각이 들었다. 언젠가 시간을 좀 들여서 정리한 후 포스팅해보기로.