매마른 페이지에 수분 공급! - Hydration

이전 포스팅에서 Hydration을 짧게나마 설명했습니다.

이번 글에서는 좀 더 자세히 다뤄보도록 하겠습니다.

 

수분 공급

 

Hydration 자체의 명사적 뜻은 수분 공급입니다.

이 뜻만 보면 어떤 수분 공급인지 감이 잘 안 잡힐 수 있습니다. 천천히 알아볼까요?

 

React ( CSR )의 구성원리

React는 js 파일만을 이용하여 웹페이지를 구성합니다. 

그래서 처음 html 코드에는 아무런 내용도 들어가지 않습니다.

브라우저가 HTML 파일을 보내주고 JS파일까지 클라이언트까지 보낸 뒤에

클라이언트 측에서 렌더링하는 원리를 가지고 있습니다.

CSR 방식이 SSR보다 SEO에서 부족한 이유이기도 하죠.

 

그래서 처음 HTML 코드에는 아무것도 없이 뼈대( index.html )만 존재하고
아래 index.js 파일을 렌더링한 후 HTML 코드에서 root id를 가진 Element를 찾아 주입합니다.

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

reportWebVitals();

 

그래서 HTML, JS를 모두 받기 전까지는 페이지가 아무것도 보여줄 수 없게 됩니다.

 

Next.js ( SSR ) 구성 원리

Next.js 같이 SSR을 제공하는 프레임워크는 HTML 파일을 미리 보내 pre-rendering 합니다.

이때 서버에서 pre-rendering 된 화면을 클라이언트가 받는 시점을 Time-To-View라고 합니다.

Time-To-View 시점에서는 아무런 이벤트도 발생시킬 수 없고 그저 페이지만을 보여주게 됩니다.

 

아무런 기능도 하지 않는 페이지를 보고 싶다면 개발자 도구를 열어서 오른쪽 상단에 톱니바퀴를 누른 후

 

아래로 내려 위 옵션에서 Diable JavaScript를 클릭하시면 아무런 JS 동작을 하지 않는 페이지를 보실 수 있습니다.

이 페이지가 Hydration 전 페이지라고 볼 수 있겠네요.

 

pre-rendering 된 후 JS 파일들이 HTML DOM 요소 위에서 한 번 더 렌더링 되고

각자의 자리를 찾아 매칭하게 됩니다. 이 과정을 Hydrate라고 부릅니다.

 

두 번 렌더링

이렇게 보면 두 번 렌더링 되는거라 비효율적이라고 볼 수도 있지만 pre-rendering 된 파일은 JS가 없기 때문에
워낙 가벼워 화면에 빠르게 로드됩니다. 두 번 렌더링 되는 단점보다도 큰 장점이죠.

그리고 각 DOM 요소에 자리를 찾아 매칭 되는 것 뿐, 다시 화면을 그리는 작업이 아닙니다.

-> paint() 메서드 호출 X

 

SSR이 아닌 CSR은 한 번에 HTML과 JS 파일을 받기 때문에 Hydrate가 일어나지 않습니다.

 

여기서 그럼 Hydrate는 Next.js만의 기능인가? 라고 생각할 수 있습니다.

사실은 React v16부터 나온 기능입니다. Next.js는 React 기반 프레임워크죠?

 

ReactDOM

render

React는 DOM에 React Component를 렌더링해주는 render 메서드를 제공합니다.

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

reportWebVitals();

React 프로젝트에서 메인 컴포넌트인 App을 렌더링 시키기 때문에 index 파일에서 볼 수 있습니다.

 

render 함수는 컨테이너의 자식으로 React Component를 넣고 컨테이너 DOM에서 렌더링 시키는 함수입니다.

기존의 이미 렌더링 된 React Component가 있다면 새로 렌더링 하지 않고 업데이트만 해줍니다.

불필요한 렌더링이 발생하지 않게하는 방법이죠.

 

렌더링이 끝나면 세 번째 인자로 전달된 callback이 실행되게 합니다.

 

hydrate

render와 사용법이 똑같은 메서드가 존재합니다. 바로 hydrate 메서드인데 hydrate는 렌더링하는 것이 아니라

Event Handler만 붙여줍니다. 특히 SSR로 이미 받아와진 정적 페이지에는 render 함수가 필요하지 않습니다.

즉, SSR로 페이지를 불러오는 경우에는 hydrate의 사용을 고려해야 합니다.

 

Next.js는 이 hydrate 메서드를 사용합니다.
그래서 매마른 정적 HTML 페이지에 JS가 흘러들어와 리액트 컴포넌트를 구성할 수 있게 됩니다.

이처럼 Hydrate는 SSR에서 페이지를 살아 숨쉬게하고 로드 속도를 향상시키는 방법이 되겠죠? 😃

 

📚 정리

Hydration은 사전적으로 수분공급이라는 의미를 가진다.

프론트엔드에서 Hydration은 JS 코드가 HTML DOM에 매칭되는 과정을 의미한다.

Hydration은 SSR에서만의 개념이 아니며 CSR 방식인 React의 함수로 사용할 수 있다.