hydration

Hydrate는 Server Side 에서 Pre-Redering 렌더링 된 정적 페이지와 번들링된 JS파일을 클라이언트에게 보낸 뒤, 클라이언트 단에서 HTML 코드와 React인 JS코드를 서로 매칭 시키는 과정을 말한다.

• (JavaScript가 모든 작업을 수행하는 대신) Next.js는 각 페이지에 대한 HTML을 미리 렌더링한다.
• 생성된 각 HTML은 해당 페이지에 필요한 최소한의 JS 코드와 연결된다.
• 이후, 브라우저에서 페이지를 로드하면 해당 JS 코드가 실행되어 페이지가 완전한 인터랙티브 상태가 된다.

next.js 에서의 렌더링과 react.js의 렌더링 비교

Hydration은 그럼 Next.js에서만 발생할 수 있다고 생각하면 안된다.

Hydration은 Next.js만의 특별한 동작이 아니라 ReactDOM 함수이다. 때문에 오직 next.js 에서만 사용 할 수 있다고 오해하면 안된다.

동작 과정

서버에서 받아온 DOM tree와 자체적으로 렌더링한 tree를 비교한다.
두 tree 사이의 차이점을 얻은 후, 자체적으로 Client-Side-Rendering한 tree와 비교하며 어떤 DOM과 매칭되는지 이해한다.
이해한 내용에 따라 클라이언트 렌더링 동작을 진행한다

export default function Hydrate() {
  const currentTime = new Date().getTime();
  return <div>{currentTime}</div>;
}
// Error: Text content does not match server-rendered HTML.
// See more info here: https://nextjs.org/docs/messages/react-hydration-error

해당 코드로 page를 띄우면

hydrate mismatch 에러가 발생한다. 즉, 서버에서 미리 렌더링된 React 트리와 브라우저에서의 첫 번째 렌더링의 React 트리 사이에 차이 (서버 측에서 렌더링 될 때의 시간과 클라이언트 측에서 렌더링 될 때의 시간의 오차) 가 있기 때문에 발생한다.

수정된 코드

import { useEffect, useState } from 'react';

export default function Hydrate() {
  const [currentTime, setCurrentTime] = useState();

  useEffect(() => {
    setCurrentTime(new Date().getTime());
  }, []);

  return (
    <>
      <div>{currentTime}</div>
    </>
  );
}

이렇게 서버 측에서는 해당 tree 를 렌더링하지 않고 클라이언트 측에서만 렌더링 될 수 있도록 수정해 주어야 한다.