Hydrate
Server Side 단에서 렌더링 된, 정적 페이지와 번들링된 JS파일을 클라이언트에게 보낸 뒤
클라이언트 단에서 HTML 코드와 JS 코드를 서로 매칭시키는 과정
1. Write site in React
2. Create build for production using ReactDOMServer, a server-side React API to generate HTML from React.
3. On Initial Load HTML generated from the server is displayed
4. ReactDOM.hydrate(), hydrates the HTML page rendered from the server with JavaScript
이 과정을 이해하기 위해 React의 웹페이지 구성 원리에 대해 알아보자
React의 웹 페이지 구성원리
React는 JS파일만을 이용하여 웹하면을 구성하는 원리를 가지고 있다.
실제 HTML 코드는 안에 내용이 하나도 없는 상태다. (Client Side Rendering이 SEO에 적합하지 않은 이유이기도 하다)
<!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 코드들을 통해 웹 화면을 렌더링 하며 페이지를 그리게 된다.
웹 페이지 렌더링을 한 뒤에도 페이지 내에서 동작하는 모든 이벤트 또한 자바스크립트로 일어나게 된다.
React에 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를 클라이언트에게 전송한다.
현재 클라이언트가 받은 웹 페이지는 단순한 HTML이고 자바스크립트 요소들이 하나도 없는 상태다.
웹화면을 보여주고 있지만 특정 JS 모듈 뿐 아니라 단순 클릭과 같은 이벤트 리스너들 또한 적용되어 있지 않은 상태다.
그럼 어떻게 동작하는 것일까 좀 더 살펴보자.
Pre-Rendering된 웹페이지를 클라이언트에게 보낸 후
리액트가 번들링 된 자바스크립트 코드들을 클라이언트에게 전송한다.
전송받은 자바스크립트 코드들이 이전에 보내진 HTML Dom 요소 위에서
한번 더 렌더링 하게 되면서 각각 자기 자리를 찾아가며 매칭된다
바로 위 과정을 Hydrate 라고 부른다.
Hydrate
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.
요약하자면, 클라이언트 측 JavaScript가 정적 호스팅 또는 서버 측 렌더링을 통해 전달되는 정적 HTML 요소에 이벤트 핸들러를 첨부하여 동적 웹 페이지로 변환하는 기술
Hydrate 과정은 Next.js에서만 일어나는 과정일까요?
Hydrate는 ReactDOM이 제공하는 메서드 중 하나이다
ReactDOM.render()와 ReactDOM.hydrate()를 비교해보자
ReactDOM.render(element, container, [callback])ReactDOM.render() 함수는 두번째 파라미터인 지정된 DOM 요소에 하위로 주입하여 렌더링해주는 방식이며 렌더링이 완료되면 특정 이벤트를 처리할 콜백함수를 세번째 인자로 넣어줄 수 있다.
ReactDOM.hydrate(element, container, [callback])
ReactDOM.hydrate() 함수는 특정 컴포넌트를 두번째 파라미터인 지정된 DOM 요소에 하위로 Hydrate 처리만 한다. 렌더링을 통해 새로운 웹페이지를 구성하는 것이 아니라 기존 DOM Tree에서 해당되는 DOM 요소를 찾아 정해진 자바스크립트 속성들만 적용시키겠다는 뜻이다.
Ref.
'Front > React' 카테고리의 다른 글
| 코드분할(Code Spliting) / 동적로딩(React.Lazy, Suspense) / 에러바운더리(Error Boundary) (0) | 2022.09.28 |
|---|---|
| [번역] useMemo, useCallback 제대로 알기 (0) | 2022.09.23 |
| [React] Create-react-app 없이 Webpack, Babel 빌드 해보기 (4) | 2021.04.22 |
| React Hook 이해하기 - useEffect (Effect Hook) (0) | 2020.05.25 |
| React Hook 이해하기 - useState (State Hook) (0) | 2020.05.25 |
댓글