Hydration

Hydration은 Next js같은 SSR을 지원하는 프레임워크를 사용하다 보면 수시로 접하는 개념이다.

우리가 SSR 방식을 택하여 렌더링을 진행하게 되면, 서버측에서 렌더링에 필요한 모든 HTML, CSS 등의 리소스를 응답받아 pre-rendering을 진행한다.

하지만 pre-rendering은 단지 서버에서 받아온 정적인 리소스를 토대로 진행되기 때문에, 이벤트를 포함한 동적인 페이지가 아니라 정적인 페이지인 상태이다. 간단히 말해 HTML만 있는 깡통 페이지 상태인 것이다.

따라서 동적 페이지 생성을 위해 JS를 pre-rendering 상태에 적용시키는 과정이 필요한데 이 과정이 바로 Hydration이다.