SSR(Server-Side Rendering) 환경에서 필수적으로 일어나는 '하이드레이션(Hydration)'의 개념과 동작 과정에 대해 설명해주세요.

[prgmr99]

SSR(Server-Side Rendering) 환경에서 필수적으로 일어나는 '하이드레이션(Hydration)'의 개념과 동작 과정에 대해 설명해주세요.

@klmhyeonwoo @prgmr99

[prgmr99]

ssr을 통해 서버에서 이미 렌더링된 html에 자바스크립트 결합하여, 브라우저에서 인터랙션이 가능한 상태로 만드는 과정을 말합니다.

---

동작과정 피드백

1. HTML 전달 (Server Side): 서버는 데이터가 채워진 HTML 파일을 생성하여 브라우저로 보냅니다. 이때 화면은 보이지만, 클릭 같은 이벤트는 작동하지 않습니다.

2. JS 번들 로드 (Client Side): 브라우저는 HTML에 포함된 자바스크립트 번들을 다운로드합니다.

3. 컴포넌트 트리 재생성 (Reconciliation): 클라이언트의 리액트(혹은 프레임워크)가 자바스크립트를 실행하여 메모리상에 가상 DOM 트리를 다시 만듭니다.

4. 매칭 및 바인딩 (Hydration): 서버에서 받은 HTML 구조와 클라이언트에서 만든 가상 DOM 구조가 일치하는지 비교합니다.

• 일치한다면 실제 DOM 노드에 이벤트 리스너(클릭, 입력 등)를 부착합니다.

5. 인터랙션 가능: 이제 사용자가 버튼을 누르면 자바스크립트 로직이 실행되는 진정한 '동적 페이지'가 됩니다.