Hydration (수분 공급 )

물을 잘 흡수하게 만드는 기능

웹 개발에서 하이드레이션이란?

브라우저에서 HTML을 렌더링할 때 페이지의 컴파일된 HTML에 JavaScript 동작을 다시 추가하는 프로세스

하이드레이션(hydration)은 Next.js와 같은 현대적인 프레임워크에서 중요한 개념입니다. 하이드레이션의 원리를 이해하기 위해서는 다음 단계를 살펴볼 필요가 있습니다.

1. 서버 측 렌더링(Server-Side Rendering, SSR):

   • 초기 요청에 대해 서버는 완전히 렌더링된 HTML을 반환합니다. 이 HTML에는 페이지의 초기 상태가 포함되어 있어 브라우저에서 빠르게 표시될 수 있습니다.

2. 정적 HTML과 JavaScript 전송:

   • 서버에서 반환된 HTML은 브라우저에 의해 렌더링됩니다. 이 시점에서 사용자는 정적 콘텐츠를 보게 됩니다. 동시에, 브라우저는 해당 페이지의 JavaScript 번들을 다운로드하기 시작합니다.

3. 클라이언트 측 하이드레이션:

   • JavaScript 번들이 다운로드되고 실행되면, React는 서버에서 생성된 HTML과 동일한 구조를 가진 가상 DOM을 생성합니다. 그런 다음, 이 가상 DOM을 실제 DOM과 비교하여 이벤트 리스너 등을 다시 연결합니다. 이 과정을 하이드레이션이라고 합니다.

하이드레이션의 목적은 서버에서 미리 렌더링된 HTML과 클라이언트 측의 React 컴포넌트를 동기화하는 것입니다. 이를 통해 초기 페이지 로드가 빠르게 이루어지고, 이후에 React의 모든 기능(상태 관리, 이벤트 처리 등)이 정상적으로 작동할 수 있습니다.

다음은 하이드레이션의 주요 단계입니다:

• 초기 HTML 전송: 서버는 정적 HTML 파일을 전송하여 빠른 초기 페이지 로드를 보장합니다.
• JavaScript 번들 로드: 브라우저는 필요한 JavaScript 파일들을 다운로드하고 실행합니다.
• 가상 DOM 생성: React는 서버에서 생성된 HTML과 동일한 구조의 가상 DOM을 만듭니다.
• 동기화: React는 가상 DOM과 실제 DOM을 비교하여 차이점을 찾아내고, 이벤트 리스너를 다시 연결합니다.

이 과정을 통해 사용자는 초기 페이지를 빠르게 볼 수 있으며, 이후에 React의 모든 동적 기능을 사용할 수 있게 됩니다.

Next.js 14의 문서에 따르면, 하이드레이션과 관련된 성능 지표를 측정하고 최적화할 수 있는 다양한 방법도 제공하고 있습니다. 예를 들어, 웹 바이탈(Web Vitals)을 통해 하이드레이션 시간, 라우트 변경 후 렌더링 시간 등을 측정할 수 있습니다