Hydration

Hydration
하이드레이션
하이드레이션은 SSR과 CSR의 장점을 결합한 방식으로, 서버에서 HTML을 렌더링하여 빠른 초기 로딩 속도를 제공하고, 이후 클라이언트에서 JavaScript를 실행하여 페이지를 동적화(interactive) 한다.
웹페이지를 랜더링하는 과정에서 React와 같은 CSR(Client Side Redering) 라이브러리는 번들된 JS를 가져와 DOM을 랜더링 한다.
이러한 방식은 많은 장점과 함께 초기 랜더링의 속도 저하, SEO의 한계 등과 같은 문제점 또한 가지고 있다.
그래서 상황에 따라 SSR(Server Side Rendering)을 선택하곤 하는데, SSR을 사용하면 언급한 CSR의 문제점을 해결할 수 있기 때문이다.
SSR과 CSR 중 무엇이 더 좋은 방식이냐에 대한 오랜 논쟁이 있지만 어떤 프로젝트이고 무엇을 중점에 두느냐에 따라 장단점이 있어 왔다.
그래서 개발자들은 Server Side 단에서 먼저 정적 페이지를 렌더링하고 JS파일들도 번들링한 후에 둘 다 Client Side로 보내주는 생각을 해냈다.
하지만 그 DOM에는 동적인 이벤트가 하나도 없는 메마른 뼈대 상태일 것이다.
그래서 이 메마른 뼈대에 수분을 보충해서, 즉 HTML 코드와 JS 코드를 서로 매칭시켜 동적인 웹사이트를 브라우저에 랜더링하는 기술이 등장했는데 이게 바로 Hydratation이다.
그래서 Hydration을 한글로 직역하면 수분 보충이라고 말할 수 있다.
Hydration은 서버에서 이미 만들어진 HTML에 클라이언트 측 JavaScript 코드를 적용하여 이벤트 리스너를 붙이거나 동적인 기능을 활성화하는 과정을 말한다. 이 과정을 통해 정적인 HTML 페이지가 상호작용 가능한 웹 애플리케이션으로 ‘변신’하게 된다.
Hydration은 서버가 사전 렌더링된 HTML 파일을 전송한 후 번들링된 Javascript 파일을 클라이언트에게 전송하여, 클라이언트에서 HTML 코드와 Javascript 코드를 서로 매칭시키는 과정을 말한다.
Hydration 이후, 어플리케이션은 인터렉티브한 동작을 수행할 수 있게 된다.