(Next.js) Hydration

Hydration이란, 브라우저에서 컴포넌트의 Javascript의 동적 기능을 연결하는 과정을 말한다.

SSR은 미리 렌더링된 HTML파일을 받는다.
이 HTML파일에는 Interactive하게 작용할 수 있는 Javascript 코드가 없기 때문에, Hydration이라는 과정을 통하여 동적 기능을 활성화 해야 한다.
예를 들어, useState, useQuery와 같은 React코드는 미리 렌더링된 HTML에서는 Hydration 과정 없이 사용할 수 없다.

위 사진은 Hydration을 가장 잘 설명한 사진이다. 오른쪽의 건베리는 겉모습은 딸기인 것을 알 수 있지만, 그 외의 신선도나 과즙 같은 것들은 전혀 찾아볼 수 없다. 하지만, 왼쪽의 딸기는 당장 농장에서 수확해온 것처럼 탱탱하고 과즙을 가득 머금은 것처럼 보인다.

Hydraion도 마찬가지다. HTML은 건베리(dehydrated berry)처럼 겉모습만 보여준다. HTML에는 페이지의 구조와 형태만 포함되어 있을 뿐, 실제로 상호작용할 수 있는 기능은 없다. 예를 들어, useState가 적용된 Button이 렌더링되었더라도, Hydration이 이루어지기 전에는 버튼이 제대로 동작하지 않는다. Hydration을 통해 JavaScript가 주입되면, 왼쪽의 신선한 딸기(hydrated berry)처럼 상호작용 가능한 웹 페이지로 변환된다.

즉, Hydration은 정적으로 생성된 HTML을 브라우저에서 React와 연결해 동적으로 동작하도록 활성화 하는 과정이다.

Hydration을 구분 할 수 있는 방법, 'use client'

Hydration은 모든 컴포넌트에서 이루어지지않는다. 오히려 SSR 서비스에서 Hydration이 많이 필요하다면, 그것은 잘못된 코드(예: “필요 이상의 클라이언트 컴포넌트를 남발하거나, 서버에서 처리 가능한 로직을 클라이언트로 넘기는 경우.”)를 작성하고 있을 가능성이 높다. Hydration이 많을 경우 유저는 그만큼 수많은 양의 Javascript를 다운 받아야함을 뜻하고, CSR방식과 크게 다를 바가 없어진다. 그렇기 때문에 Next.js에서는 서버에서 변환(SSR)을 기본 원칙으로하고, 필요한 컴포넌트에서만 Hydration하도록 하고 있다.

Hydration 컴포넌트를 구별하는 방법은, 컴포넌트 파일 최상단에 'use client'라고 적는다. 'use client'는 컴포넌트를 클라이언트 컴포넌트로 지정하는 지시문이다. 이를 사용하면 해당 컴포넌트에서만 Hydration이 발생하고, 나머지 부분은 SSR로 처리된다. 아래는 예시 코드이다.

'use client'; // Hydration이 필요하다는 것을 Next.js에게 알림
 
import { useState } from 'react';
 
export default function ClientComponent() {
    const [count, setCount] = useState(0); // Hydration이 필요한 React 코드
 
    return (
        <button onClick={() => setCount(count + 1)}>
            Clicked {count} times
        </button>
    );
}

Hydration이 필요한 경우

Hydration은 웹 페이지가 유저와 상호작용 할 때 필요하다. 예를 들어, useState나 useQuery, Soft Load를 위한 <Link>컴포넌트와 같은 React 코드를 사용해야 할 때 필요하다. 역으로 정적인 텍스트나 이미지를 표시하는 컴포넌트에서는 Hydration이 필요가 없기 때문에, 'use client'를 적지 않는게 좋다.

Hydration의 과정

SSR의 핵심은 서버에서 Javascript를 변환하여 HTML을 생성하는 것이며, 유저에게 HTML파일을 respone한다. Hydration이 필요한 상황이더라도, SSR에서는 무조건 Javascript파일을 변환하는 것이 기본적인 원칙이다. 아래 과정을 통해 Hydration의 과정을 알아 볼 수 있다.

기존 방식(SSR)

1. [서버] JavaScript 파일을 실행해 HTML로 변환
2. [서버] 변환된 HTML을 유저에게 전송
3. [유저] 변환된 HTML을 브라우저에 렌더링
4. 끝.

Hydration 과정(SSR + Hydration)

1. [서버] JavaScript 파일을 실행해 HTML로 변환
2. [서버] 변환된 HTML을 유저에게 전송
3. [유저] 변환된 HTML을 브라우저에 렌더링
4. [서버] 클라이언트 측에서 필요한 JavaScript 번들을 유저에게 전송
5. [유저] 받은 JavaScript를 이용해 브라우저에서 Hydration 수행 (HTML에 동적 기능 연결)
6. 끝.

Hydration의 주의점

'use client' 지시문이 적용된 컴포넌트에서 Hydration이 이루어지면, 해당 컴포넌트의 모든 자식 컴포넌트도 클라이언트 컴포넌트로 처리된다. 이는 자식 컴포넌트가 'use server' 지시문을 포함하고 있더라도, 부모 컴포넌트가 'use client'로 렌더링될 경우 클라이언트 측에서 렌더링되기 때문이다.