[React.js] React에서의 Hydrate
Hydrate
Hydrate란 수화의 의미를 가지고 있다.
수화란, 우리 몸에 필요한 수분을 보충하는 행위를 뜻한다.
React에서는 Server Side 단에서 렌더링 된, 정적 페이지와 번들링된 JS파일을 클라이언트에게 보낸 뒤 클라이언트 단에서 HTML 코드와 JS 코드를 서로 매칭시키는 과정을 Hydrate라 칭하고 있다.
SSR의 동작 방식을 참고해보자.
[참고 : [Browser] SSR, CSR 그리고 SPA]
동작 방식중 5번 ~ 7번을 보면 JavaScript를 다운로드 후 이전에 받은 HTML DOM 요소 위에서 다시 한번 더 렌더링 하여 각각의 배치에 맞게 JavaScript가 채워지게 되는데 이 때 빈 HTML에 JavaScript를 채워넣는다고 하여 Hydrate라고 하는 것 같다.
조금 더 자세히 들어가보자.
Next 에서 말하고 있는 Hydrate 구조를 살펴보면 아래와 같다.
- Server Build
- Server Side Render
- Contentful HTML Load
- hydrate the HTML Page rendered from the Server with JavaScript
Pre-Rendering 된 웹 페이지를 클라이언트에 보내고, React가 번들링 된 JavaScript 코드를 클라이언트에게 전달한다.
이 때의 과정은 아래와 같다.
- 맨 처음 응답 받는 요소가 document Type의 파일
- React 코드들이 렌더링 된 JavaScript 파일들이 Chunk 단위로 다운로드 된다.
- 다운로드 된 JavaScript 파일이 이전에 보내진 HTML DOM 요소 위에서 한번 더 렌더링을 하면서 각자 자기 자리를 찾아가게 된다.
위 과정을 Hydrate라고 한다.
2번 렌더링을 진행하니 손해 아닌가?
그렇게 생각할 수 있지만, 아래 내용을 보면 손해가 아니라는 것을 알게 된다.
서버단에서 Pre-Rendering을 통해 사용자에게 빠른 웹 페이지로 응답할 수 있다는 것과 Pre-Rendering 한 HTML은 모든 JavaScript 요소들이 빠진 굉장히 가벼운 상태로 빠른 렌더링이 가능하다.
이 과정만 봤을 때에도 이미 사용자에게 충분히 좋은 경험을 주었기 때문에 절대 손해가 아니다.
더 나아가 클라이언트 단에서 JavaScript가 렌더링을 할 때 단지 각 DOM 요소에 JavaScript 속성을 매칭시키기 위한 것으로 실제 웹은 브라우저 렌더링 과정을 다시 거치지 않는다.(Paint 동작 X)
Hydrate 과정은 어디에서 작동하는가? Next.js에서만 작동하나?
사실 Hydrate는 ReactDOM에 있는 Method다.
CSR 방식으로 React를 구성할 때 ReactDOM.render(...) 를 사용한 것과 같이, ReactDOM.hydrate(...)을 사용할 수 있다.
두 메서드의 차이를 살펴보자.
render(...)
ReactDOM.render(element, container, [callback])ReactDOM.render() 함수는 두번째 파라미터인 지정된 DOM 요소에 하위로 주입하여 렌더링해주는 방식이며 렌더링이 완료되면 특정 이벤트를 처리할 콜백함수를 세번째 인자로 넣어줄 수 있다.
hydrate(...)
ReactDOM.hydrate(element, container, [callback])ReactDOM.hydrate() 함수는 특정 컴포넌트를 두번째 파라미터인 지정된 DOM 요소에 하위로 Hydrate 처리만 한다. 렌더링을 통해 새로운 웹페이지를 구성하는 것이 아니라 기존 DOM Tree에서 해당되는 DOM 요소를 찾아 정해진 자바스크립트 속성들만 적용시키겠다는 뜻이다.
성능을 개선시키기 위한 방법으로 Partial Hydration 방법이 있다.
이 방법에 대해 공부하기 전 간단히 Hydration에 대해 기억하기 위해 작성했다.