ハイドレーション

どういう場面で使うか

·SSR / SSG で生成した HTML をブラウザでインタラクティブにするとき
·Client Component が初回描画後にイベントを受け付けるようになる仕組みを理解するとき

注意点 / Pitfalls

·サーバーとクライアントで描画結果が異なるとハイドレーションエラーになる
·Date.now() や Math.random() など呼び出しごとに変わる値をレンダリングに使わない
·ブラウザ拡張が HTML を書き換えるとエラーが出ることがある。その場合は suppressHydrationWarning を検討する
·useEffect 内でのみブラウザ依存の処理を行う

何と混同しやすいか

server-actions

補足

Next.js App Router では Server Components はハイドレーションされない（サーバー専用）。'use client' を付けたコンポーネントだけがハイドレーション対象になる。

概要

ハイドレーションとは、サーバーで生成した静的 HTML に対して、ブラウザ上の React がイベントリスナーを付加し、インタラクティブなアプリとして動作させるプロセスです。

Next.js App Router では、"use client" を宣言したコンポーネントだけがハイドレーション対象になります。Server Components はサーバー専用でハイドレーションされません。

ハイドレーションエラーの原因

サーバーとクライアントの描画結果が一致しないとエラーになります。

// NG: サーバーとクライアントで異なる値になる
function BadComponent() {
  return <div>{Math.random()}</div>; // 毎回変わる
}

// OK: useEffect でクライアントのみ実行
function GoodComponent() {
  const [value, setValue] = useState<number | null>(null);
  useEffect(() => {
    setValue(Math.random());
  }, []);
  return <div>{value ?? "..."}</div>;
}

ブラウザ拡張による誤検知

GA オプトアウト拡張などが <html> タグに属性を付け加えることでエラーが出る場合があります。その場合は suppressHydrationWarning を追加します。

<html lang="ja" suppressHydrationWarning>

Server Components との関係

App Router では Server Components → Client Components という方向でのみ "use client" 境界を置けます。 Client Component は SSR でサーバー側でも一度レンダリングされ、ブラウザでハイドレーションされます。