Hydration 이란?

Hydration 이란 무엇인가??

• 서버 측에서 미리 렌더링 된 HTML을 클라이언트(브라우저)측에서 React가 다시 활성화 하는 과정을 말한다. 이를 통해 초기 페이지 로딩 속도를 개선하고 SEO(검색 엔진 최적화)를 강화할 수 있다.

왜 Hydration이 필요한가???

1. SSR로 생성된 HTML은 브라우저가 빠르게 렌더링 하지만, 그 HTML에는 React의 상태 관리나 이벤트 핸들러가 포함되어 있지 않다.

2. 클라이언트 측에서 React가 그 HTML을 다시 인식하고 이벤트 핸들러와 상태를 적용해 상호작용 가능한 애플리케이션으로 만들어야 한다. 이과정을 hydration이라고 부른다.

• 초기 HTML이 화면에 표시된 후, 자바스크립트가 실행되며 인터랙티브 기능을 활성화 된다.

Hydration 과정

1. 서버에서 HTML을 미리 생성해 사용자의 브라우저로 전송

2. 클라이언트 (브라우저)는 React를 이용해 서버에서 받은 HTML을 분석하고, 이를 기반으로 Virtual DOM을 생성 한다.

여기서 잠깐 Virtual DOM이란 녀석은 무엇일까????

Virtual DOM 이란????

버츄얼 돔은 웹페이지의 실제 DOM과는 별도로 메모리에 유지되는 가상 사본이다. 주로 React 같은 라이브러리에서 사용되며ㅡ 화면을 효율적으로 업데이트하는데 도움을 준다.

• state 즉 상태가 변경되면 가상트리를 생성하고 이전 Virtual DOM 과 새로 생성된 Vurtual DOM을 비교해서 변경된 부분만 DOM에 반영한다.

3. 서버의 HTML과 React의 virtual DOM이 일치하면, 이벤트 핸들러 등이 연결 되고 페이지가 상호작용할 수 있게 된다.

그럼 Hydration을 사용하면 무엇이 좋고 단점은 뭔데??

장점

• 빠른 초기 로딩: SSR 덕분에 사용자에게 빠르게 페이지가 보인다.

• SEO 향상: 검색 엔진이 서버에서 렌더된 HTML을 쉽게 크롤링할 수 있다.

• 코드 재사용: 서버와 클라이언트 모두 동일한 React 코드를 사용한다.

단점

• Hydration 지연: 클라이언트에서 React가 Virtual DOM을 생성하고 HTML과 비교하는 과정이 느릴 수 있따.
• Mismatch 문제: 서버에서 생성된 HTML과 클라이언트의 Virtual DOM이 일치하지 않으면 경고 메시지와 함께 예상치 못한 동작이 발생할 수 있따.