Hydrate
Server Side단에서 렌더링 된.JS파일을 클라이언트 단에서HTML코드와JS코드를 서로 매칭시키는 과정
Server Side단에서 렌더링 된 정적 페이지와 번들링된 .js 파일(Webpack)을 클라이언트에게 전송한다.
이 후 클라이언트 단에서는 HTML 코드와 React인 js 코드를 서로 매칭시키는데 이러한 과정을 Hydrate라고 한다.
Hydrate를 이해하기 위해서는 React의 웹페이지 구성 원리에 대해 알아야할 필요성이 있다.
React의 웹 페이지 구성원리
기본적으로 React는 JS 파일만을 이용하여 웹 하면을 구성한다.
그래서 실제 HTML 코드 안에는 내용이 하나도 없는 빈 상태이다.
Client Side Rendering이SEO에 적합하지 않은 이유
// public/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Title</title>
</head>
<body>
<div id="root"></div>
</body>
</html>이렇게 단순 뼈대만 존재하는 HTML Document와 JS 파일들을 클라이언트로 모두 보낸 뒤, 클라이언트 단에서는 JS 코드들을 통해 웹 화면을 렌더링 하며 페이지를 그린다.
웹 페이지 렌더링을 완료하면 이 후 페이지 내에서 동작하는 모든 이벤트는 JavaScript로 동작한다.
React에 index.js 코드를 확인해보면 다음과 같다.
// src/index.js
import React from "react"
import ReactDOM from "react-dom"
import App from './src/App'
ReactDOM.render(<App />, document.getElementById("root"))위 코드 처럼 기본 인덱스 화면을 렌더링 한 뒤, root 아이디 요소안에 React로 작성된 페이지들이 담기게 된다.
Next.js 웹 페이지 구성원리
Next.js는 클라이언트에게 웹 페이지를 보내기 전 Server Side 단에서 미리 웹페이지를 Pre-Rendering 한다.
그리고 Pre-Rendering으로 인해 생성된 HTML Document를 클라이언트에게 전송한다.
이렇게 받은 웹 페이지는 JavaScript 요소가 포함되지 않은 단순한 HTML이다.
즉, 웹 화면을 보여주고 있지만 특정 JS 모듈 뿐 아니라 단순 클릭과 같은 이벤트 리스너들 또한 적용되어 있지 않은 상태이다.
React:HTML과.JS파일을 한번에 보낸 뒤 클라이언트에서JS코드를 통해 웹 화면을 렌더링Next:Pre-Rendering된 웹 페이지를 클라이언트에게 먼저 보낸 뒤,React가 번들링된 자바스크립트 코드들을 클라이언트에게 전송
실제로 Next.js로 제작된 웹 페이지를 방문하면 처음 document 타입의 파일을 전송받아, 이 후 렌더링된 React.js 파일들이 Chunk 단위로 다운로드 되는 것을 확인할 수 있다.
이 때 전송받은 JavaScript 코드들은 이전에 보내진 HTML Dom 요소 위에서 한번 더 렌더링 하여 각각 자신의 자리에 매칭되는데 이러한 과정을 Hydrate라고 한다.
Hydrate는 클라이언트 측JavaScript가 정적 호스팅 또는 서버 측 렌더링을 통해 전달되는 정적HTML요소에 이벤트 핸들러를 첨부하여 동적 웹 페이지로 변환하는 기술 -Wikipedia
Hydrate의 장점은 다음과 같다.
-
React와는 다르게Pre-Rendering된Document는 자바스크립트 요소가 빠진 가벼운 상태이기 때문에 클라이언트 측에서 빠른 로딩이 가능하다. -
Chunk단위로 다운로드된 자바스크립트 요소들이 렌더링 될 때 먼저 받아진document의DOM요소에 자바스크립트 속성이 매칭 되기 때문에 웹 페이지를 다시 그리는 과정은 일어나지 않는다.
Hydrate는 ReactDOM의 메서드
이러한 Hydrate는 Next.js에서만 일어나는 과정이 아닌, ReactDOM이 제공하는 메서드 중 하나이다.
ReactDOM의 render와 hydrate 메서드를 비교해보면 다음과 같다.
ReactDOM.render(element, container, [callback])ReactDOM.render() 함수는 두번째 파라미터인 지정된 DOM 요소에 하위로 주입하여 렌더링해주는 방식이다.
또한 렌더링이 완료되면 특정 이벤트를 처리할 콜백함수를 세번째 인자로 넣을 수도 있다.
ReactDOM.hydrate(element, container, [callback])ReactDOM.hydrate() 함수는 특정 컴포넌트를 두번째 파라미터인 지정된 DOM 요소에 하위로 Hydrate 처리만 한다.
즉, 렌더링을 통해 새로운 웹페이지를 구성하는 것이 아닌 기존 DOM Tree에서 해당되는 DOM 요소를 찾아 정해진 JavaScript 속성들만 적용한다.
참고 자료
Hydrate - Wikipedia
What is a technical definition of "hydration" within NextJS?
Next.js의 Hydrate란? - 이뇽의세상
