React에 물주기..?🌼

Hydration = 수화

수화에 사전적인 뜻 아래와 같다.

용액 속에서 용질 분자나 이온이 용매인 물 분자와 결합하여 하나의 분자군을 이루게 됨. 또는 그런 현상

간단히 말하면 물에 녹이는건데 그럼 우리가 리액트에 물을 주는것도 아닌데 왜 hydration이란 표현을 쓰는걸까?

웹페이지를 랜더링하는 과정에서 React와 같은 Client Side Redering(CSR) 라이브러리는 번들된 js를 가져와 DOM을 랜더링한다. 이러한 방식은 많은 장점과 함께 초기 랜더링의 속도 저하, SEO의 한계 등과 같은 문제점 또한 가지고 있다. 그래서 상황에 따라 Server Side Rendering(SSR)을 선택하곤 하는데, SSR을 사용하면 사용자는 사이트를 사용하기 전에 JavaScript가 처리되기를 기다리지 않아도 되기 때문에 비용을 줄일 수 있기 때문이다. 이렇게 보면 SSR이 무조건 좋은것 같지만 SSR과 CSR도 무엇을 중점에 두느냐에 따라 장단점이 있어 왔다. 그래서 개발자들은 Server Side 단에서 먼저 정적 페이지를 렌더링하고 JS파일들도 번들링한 후에 둘다 Client Side로 보내주는 방법을 생각을 해냈다. 하지만 이때의 DOM은 동적인 이벤트가 하나도 없는 정적인(메마른) 상태(dehydration)일 것이다. 그래서 HTML 코드와 JS 코드를 서로 매칭시켜 동적인 웹사이트를 브라우저에 랜더링하는 기술이 등장했는데 이게 바로 Hydration이다.

즉, Hydration은 브라우저에 사이트를 표현하는 과정에서 웹사이트의 동적인 상태와 정적인 상태를 비유적으로 표현하기 위해 등장한 말이다.

render와 hydrate

그럼ReactDOM.render와 ReactDOM.hydrate의 차이점을 비교해보자.
일단 render는 DOM에 컴포넌트를 렌더링해주는 메소드이다.

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

메소드를 살펴보면 컨테이너의 자식으로 react 컴포넌트를 넣어준다. 만약 기존에 이미 렌더링된 컴포넌트가 있다면 새로 렌더링하는 것이 아니라 업데이트만 해준다. 그리고 렌더링이 완료되면 세번째 인자로 전달된 콜백이 실행되게 할 수 있다.

hydrate메소드를 보면

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

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

HTML Streaming과 Selective Hydration

이제 서버 렌더링과 마찬가지로 빠른 First Contentful Paint를 구현한 다음 클라이언트에서 hydration을 사용하여 매칭할 수 있는 아키텍쳐를 새로운 솔루션으로 사용할 수 있게되었다. 하지만, SSR의 페이지는 실제로 JS가 실행되고 이벤트 핸들러가 첨부될 때까지 입력에 응답할 수 없을 수 있다. 이를 해결하기 위해 React18부터 HTML Streaming과 Selective Hydration이 도입됐다. 이 방법을 이용하면 SSR시 발생하는 병목 현상을 줄일 수 있다. 두가지 개념에 대한 자세한 내용은 내 벨로그에 간단히 정리해놓았다.

마무리

SSR의 병목현상 같은 문제들을 해결할 수 있는 좋은 환경이 되었지만, 설계의 복잡성은 한 층 더 올라간거 같긴하다..