[React] Hydration과 Dehydration

Hydration과 Dehydration은 React와 같은 프론트엔드 프레임워크에서 중요한 개념으로, 서버 사이드 렌더링(SSR) 및 클라이언트 사이드 렌더링(CSR)에서 자주 사용됩니다. 이 두 개념을 이해하면 React 애플리케이션의 초기 로딩 성능과 사용자 경험을 개선하는 데 도움이 됩니다.

 

Hydration (수화)

Hydration은 서버에서 렌더링된 HTML을 클라이언트(브라우저)에서 React가 다시 활성화하는 과정입니다. 서버 사이드 렌더링(SSR)을 사용하면 초기 HTML이 서버에서 생성되어 클라이언트로 전송되는데, 이 HTML은 React 컴포넌트가 아닌 단순한 HTML입니다. 클라이언트가 이 HTML을 받으면, React는 이 HTML을 '재사용'하고, 이를 기반으로 초기 렌더링을 수행하면서 이벤트 핸들러와 같은 인터랙티브 요소를 활성화합니다.

 

작동 과정

1. 서버 사이드 렌더링: 서버에서 React 컴포넌트가 HTML로 렌더링되고, 이 HTML이 클라이언트로 전송됩니다.
2. 클라이언트 수신: 클라이언트는 서버에서 전송된 HTML을 수신하고 초기 화면을 렌더링합니다.
3. Hydration: React는 클라이언트에서 서버에서 렌더링된 HTML을 탐색하고, 이를 React 컴포넌트로 변환하면서 이벤트 핸들러와 상태 관리를 추가합니다. 이 과정에서 클라이언트의 초기 렌더링과 서버의 HTML이 일치해야 합니다.

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

// 서버 사이드 렌더링된 HTML을 기반으로 Hydration
ReactDOM.hydrate(<App />, document.getElementById('root'));

 

❓Rehydration
hydration은 일차적인 과정으로, 페이지 로드 시에 정적 HTML을 동적 앱으로 변환하는 전체 과정을 말합니다. Rehydration은 이 과정 중에서 특히 데이터와 상태의 복원 및 동기화를 강조하는데 사용되는 용어로, 보통은 추가적인 데이터 로딩이나 사용자의 상호작용에 따른 상태 변경 등이 포함될 수 있습니다.

 

Dehydration (탈수)

Dehydration은 상태를 포함한 클라이언트 측의 애플리케이션 데이터를 서버로 보내거나, 서버 사이드 렌더링 중에 필요한 데이터만 최소화하여 전달하는 과정입니다. 이 개념은 흔히 데이터 페칭과 상태 관리를 최적화하기 위해 사용됩니다. Dehydration은 클라이언트에서 서버로 상태를 전송하여 이후 요청에서 이 상태를 재사용할 수 있도록 하거나, 서버에서 클라이언트로 보내는 HTML과 함께 최소한의 데이터를 포함하여 클라이언트가 이를 사용해 애플리케이션을 재구성하는 것을 의미합니다.

 

예시: React Query와 같은 라이브러리에서의 사용

React Query와 같은 라이브러리는 Hydration과 Dehydration을 사용하여 클라이언트와 서버 간의 데이터 동기화를 최적화합니다.

import { Hydrate, QueryClient, QueryClientProvider, dehydrate } from 'react-query';
import { ReactQueryCacheProvider } from 'react-query';

const queryClient = new QueryClient();

// 서버 측에서 데이터 페칭 후, Dehydration으로 상태 전달
export async function getServerSideProps() {
  await queryClient.prefetchQuery('todos', fetchTodos);

  return {
    props: {
      dehydratedState: dehydrate(queryClient),
    },
  };
}

function MyApp({ dehydratedState }) {
  return (
    <QueryClientProvider client={queryClient}>
      <Hydrate state={dehydratedState}>
        <App />
      </Hydrate>
    </QueryClientProvider>
  );
}

export default MyApp;

 

 

주요 차이점 요약

• Hydration: 서버에서 렌더링된 HTML을 클라이언트에서 React 컴포넌트로 변환하여 상호작용을 가능하게 만드는 과정.
• Dehydration: 클라이언트나 서버 측에서 상태를 최소한의 데이터로 변환하여 다른 쪽으로 전달하고, 나중에 이를 재구성하여 애플리케이션을 재구성하는 과정.

이 두 개념은 효율적인 서버 사이드 렌더링과 클라이언트 측 상태 관리를 통해 React 애플리케이션의 초기 로딩 속도와 사용자 경험을 개선하는 데 중요한 역할을 합니다.