SSR에서 하이드레이션이 필요한 이유는 무엇인가?

서버가 보낸 정적 HTML에 자바스크립트 이벤트 리스너를 결합해 상호작용을 가능하게 만들기 위해서다.

서버가 렌더링한 HTML은 단순히 눈에 보이는 뼈대일 뿐이다. 사용자가 클릭하거나 입력해도 반응이 없다. 자바스크립트가 실행되어야 동적 동작이 살아난다.

브라우저는 내려받은 자바스크립트로 가상 DOM을 만든다. 이 가상 DOM을 이미 존재하는 HTML 구조에 연결하는 과정이 하이드레이션이다. 처음부터 DOM을 새로 그리지 않아 렌더링 비용을 줄인다.

서버와 클라이언트의 초기 데이터가 다르면 에러가 발생한다. 서버와 클라이언트에서 렌더링한 결과가 반드시 일치해야 정상적으로 동작한다.