Hydration (React ver.18)

들어가기

React v18에서는 새로운 Suspense SSR Architecture가 추가될 예정이고 이제 React의 Suspense를 융합해 선택적인 Hydratation을 웹사이트에 적용할 수 있게 된다. Hydratation은 이미 서버 사이드 렌더링을 제공하는 많은 프레임워크나 라이브러리(Gatsby, Next.js 등)에서 필수적으로 제공하는 솔루션이다. 왜 이 기술을 사람들이 사용하려 하는지 다시 생각해 보고 그 동작 원리를 한번 정리하는 시간을 가져 보려 한다.

Hydration

In web development, hydration or rehydration is a technique in which client-side JavaScript converts a static HTML web page, delivered either through static hosting or server-side rendering, into a dynamic web page by attaching event handlers to the HTML elements.

웹페이지를 랜더링하는 과정에서 React와 같은 Client Side Redering(CSR) 라이브러리는 번들된 js를 가져와 DOM을 랜더링한다. 이러한 방식은 많은 장점과 함께 초기 랜더링의 속도 저하, SEO의 한계 등과 같은 문제점 또한 가지고 있다. 그래서 상황에 따라 Server Side Rendering(SSR)을 선택하곤 하는데, SSR을 사용하면 언급한 CSR의 문제점을 해결할 수 있기 때문이다. SSR과 CSR 중 무엇이 더 좋은 방식이냐에 대한 오랜 논쟁이 있지만 어떤 프로젝트이고 무엇을 중점에 두느냐에 따라 누가 장단점이 있어 왔다.

그래서 개발자들은 Server Side 단에서 먼저 정적 페이지를 렌더링하고 JS파일들도 번들링한 후에 둘다 Client Side로 보내주는 생각을 해냈다. 하지만 그 DOM에는 동적인 이벤트가 하나도 없는 메마를 상태일 것이다. 그래서 이 메마른 뼈대에 수분을 보충해서, 즉 HTML 코드와 JS 코드를 서로 매칭시켜 동적인 웹사이트를 브라우저에 랜더링하는 기술이 등장했는데 이게 바로 Hydratation이다. 그래서 Hydration을 한글로 직역하면 수분 보충이라고 말 할 수 있다.

Next.js는 React에서 v16부터 제공하는 hydrate 기능을 사용해서 이러한 솔루션을 성공적으로 제공했다. hydrate는 ReactDOM의 함수인데 흔히 리액트 프로젝트 구축 시 초반에 꼭 작성해주는 render 함수와 잠깐 비교를 해보자.

ReactDOM.render(element, container, [callback]);

ReactDOM.render() 함수는 특정 컴포넌트를 두 번째 파라미터인 지정된 DOM 요소에 하위로 주입하여 렌더링을 처리해주는 함수이다. 그리고 렌더링이 완료되면 특정 이벤트를 처리할 콜백 함수를 세 번째 파라미터로 넣어줄 수 있다.

ReactDOM.hydrate(element, container, [callback]);

ReactDOM.hydrate() 함수는 특정 컴포넌트를 두 번째 파라미터인 지정된 DOM 요소에 하위로 hydrate 처리만 한다. 이는 렌더링을 통해 새로운 웹 페이지를 구성할 DOM을 생성하는 것이 아니라, 기존 DOM Tree에서 해당되는 DOM 요소를 찾아 정해진 자바스크립트 속성(이벤트 리스너 등)들만 부착시키겠다는 말이다.

참고

https://velog.io/@huurray/React-Hydration-%EC%97%90-%EB%8C%80%ED%95%98%EC%97%AC