Remix でアプリケーションを開発していると、突然コンソールに「Hydration failed」というエラーが表示されることがあります。このエラーは、サーバーサイドでレンダリングされた HTML とクライアントサイドで再構築される DOM が一致しない場合に発生するものです。

この記事では、Hydration エラーの原因を特定し、確実に解決する診断手順を詳しく解説します。初心者の方でも実践できるよう、具体的なコード例と共に段階的にご説明していきますので、ぜひ最後までお読みください。

背景

Hydration とは

Hydration（ハイドレーション）は、サーバーサイドレンダリング（SSR）を採用しているフレームワークで重要なプロセスです。Remix もこの SSR の仕組みを活用しており、ページの初期表示を高速化しています。

具体的には、以下の流れで動作します。

mermaidCopy codesequenceDiagram
    participant Browser as ブラウザ
    participant Server as Remix<br/>サーバー
    participant Client as React<br/>クライアント

    Browser->>Server: ページリクエスト
    Server->>Server: React を<br/>サーバー側で実行
    Server->>Browser: 完成した HTML を返却
    Browser->>Browser: HTML を即座に表示
    Browser->>Client: JavaScript 読み込み
    Client->>Client: 仮想 DOM を構築
    Client->>Browser: Hydration<br/>["イベントハンドラ付与"]

サーバーは React コンポーネントを実行して HTML を生成し、ブラウザに送信します。ブラウザはこの HTML を即座に表示できるため、ユーザーは素早くコンテンツを見ることができます。

その後、JavaScript が読み込まれると、React はクライアント側で同じコンポーネントを再実行し、仮想 DOM を構築します。この仮想 DOM とサーバーから受け取った HTML が一致すれば、React は既存の DOM にイベントハンドラなどを付与するだけで済みます。これが Hydration です。

Hydration が重要な理由

Hydration により、以下のメリットが得られます。

• 初期表示の高速化: サーバーで HTML を生成するため、JavaScript の実行を待たずにコンテンツを表示できます
• SEO の向上: 検索エンジンのクローラーは完成した HTML を読み取れるため、インデックスされやすくなります
• インタラクティブ性の維持: Hydration 後は通常の React アプリケーションとして動作し、ユーザー操作に応答できます

しかし、このプロセスがうまくいかないと「Hydration failed」エラーが発生してしまうのです。

課題

Hydration エラーが発生する仕組み

Hydration エラーは、サーバーで生成された HTML とクライアントで再構築された仮想 DOM に差異がある場合に発生します。React は両者を比較し、不一致を検出するとエラーを報告します。

mermaidCopy codeflowchart TB
    server["サーバー側<br/>レンダリング"]
    client["クライアント側<br/>レンダリング"]
    compare["DOM 構造を比較"]
    match{"一致？"}
    hydrate["Hydration 成功<br/>イベント付与"]
    error["Hydration failed<br/>エラー発生"]

    server --> compare
    client --> compare
    compare --> match
    match -->|はい| hydrate
    match -->|いいえ| error

このエラーが発生すると、以下のような問題が起こります。

ユーザー体験の低下: 画面がちらつく、表示が一瞬崩れる、期待通りに動作しないなど、ユーザーにとって不快な体験となります。

予期しない動作: React が DOM を再構築しようとするため、フォームの入力値が消える、スクロール位置がリセットされるなどの問題が発生する可能性があります。

デバッグの困難さ: エラーメッセージだけでは原因の特定が難しく、どこで不整合が起きているのかを見つけるのに時間がかかります。

よくある原因パターン

Hydration エラーは様々な原因で発生しますが、主なパターンは以下の通りです。

#	原因カテゴリ	具体例	発生頻度
1	環境依存の値使用	Date.now(), Math.random() をレンダリング時に直接使用	★★★
2	ブラウザ専用 API	window, document, localStorage をサーバー側で参照	★★★
3	条件分岐の不一致	typeof window !== 'undefined' による条件分岐	★★☆
4	HTML 構造の違反	<p> タグ内に <div> を配置するなど	★★☆
5	外部ライブラリの影響	ブラウザ拡張機能や広告ブロッカーによる DOM 改変	★☆☆

これらの原因は、いずれもサーバーとクライアントで異なる結果を生成してしまうため、Hydration の不整合を引き起こします。

エラーメッセージの例

実際に表示されるエラーメッセージは以下のような形式です。

typescriptCopy code// コンソールに表示される典型的なエラー
Error: Hydration failed because the initial UI does not match what was rendered on the server.

typescriptCopy code// より詳細な情報が含まれる場合
Warning: Text content did not match. Server: "Server Time: 2025-11-08 10:00:00" Client: "Server Time: 2025-11-08 10:00:05"

typescriptCopy code// DOM 構造の不一致の例
Warning: Expected server HTML to contain a matching <div> in <p>.

これらのエラーメッセージから、どの部分で不整合が起きているかのヒントを得られますが、完全な原因特定には診断手順が必要です。

解決策

診断手順の全体像

Hydration エラーを確実に解決するには、系統的なアプローチが効果的です。以下の手順で診断を進めていきます。

mermaidCopy codeflowchart TD
    start["Hydration エラー<br/>発生"]
    step1["エラーメッセージ<br/>を確認"]
    step2["React DevTools で<br/>コンポーネント特定"]
    step3["サーバー／クライアント<br/>出力を比較"]
    step4["原因パターンを<br/>確認"]
    step5["修正方法を適用"]
    test{"解決？"}
    done["修正完了"]

    start --> step1
    step1 --> step2
    step2 --> step3
    step3 --> step4
    step4 --> step5
    step5 --> test
    test -->|はい| done
    test -->|いいえ| step2

それでは、各ステップを詳しく見ていきましょう。

ステップ 1：エラーメッセージの確認

まず、ブラウザのコンソールに表示されるエラーメッセージを注意深く読みます。React 18 以降では、より詳細な情報が提供されるようになりました。

エラーメッセージには以下の情報が含まれています。

• 不一致の種類: テキストコンテンツの違い、タグの違い、属性の違いなど
• サーバー側の値: サーバーでレンダリングされた実際の値
• クライアント側の値: クライアントで再構築された値
• コンポーネントスタック: どのコンポーネント階層でエラーが発生したか

これらの情報をメモしておくと、後の診断がスムーズに進みます。

ステップ 2：問題のコンポーネントを特定

React Developer Tools を使用して、エラーが発生しているコンポーネントを特定します。

React DevTools のインストール

Chrome や Firefox の拡張機能ストアから「React Developer Tools」をインストールしてください。

コンポーネントツリーの確認

開発者ツールを開き、「Components」タブを選択します。エラーメッセージに表示されたコンポーネントスタックを参考に、該当するコンポーネントを探します。

問題のコンポーネントを見つけたら、そのコンポーネントの props や state を確認し、サーバーとクライアントで異なる値が使用されていないかチェックします。

ステップ 3：サーバーとクライアントの出力を比較

サーバーから送信された HTML とクライアントで生成される HTML を直接比較します。

サーバー HTML の確認

ブラウザで「ページのソースを表示」を選択すると、サーバーから送信された元の HTML を見ることができます。

htmlCopy code<!-- サーバーから送信された HTML の例 -->
<div id="root">
  <p>現在時刻: 2025-11-08 10:00:00</p>
</div>

クライアント HTML の確認

開発者ツールの「Elements」タブで DOM を確認すると、クライアント側で Hydration 後の HTML を見ることができます。

htmlCopy code<!-- クライアント側で再構築された HTML の例 -->
<div id="root">
  <p>現在時刻: 2025-11-08 10:00:05</p>
</div>

この例では、時刻が異なっているため Hydration エラーが発生します。

ステップ 4：原因パターンの確認と修正

特定したコンポーネントのコードを確認し、以下の原因パターンに該当しないかチェックします。それぞれのパターンに対する具体的な修正方法は、次の「具体例」セクションで詳しく解説します。

チェックリスト

以下の項目を順番に確認していきます。

1. 現在時刻やランダム値を直接レンダリングしていないか
2. window や document などのブラウザ専用 API を使用していないか
3. サーバーとクライアントで異なる条件分岐をしていないか
4. HTML の入れ子ルールに違反していないか
5. 外部ライブラリが DOM を改変していないか

これらのチェックを行うことで、大半の Hydration エラーの原因を特定できます。

具体例

パターン 1：環境依存の値を使用している場合

最も頻繁に発生するのが、サーバーとクライアントで異なる値を生成してしまうケースです。

エラーコード: Warning: Text content did not match

問題のあるコード

typescriptCopy code// app/routes/_index.tsx
export default function Index() {
  // サーバーとクライアントで実行時刻が異なるため、
  // 異なる値が生成されてしまう
  const currentTime = new Date().toLocaleString();

  return (
    <div>
      <h1>ようこそ</h1>
      <p>現在時刻: {currentTime}</p>
    </div>
  );
}

このコードは、サーバーで実行される時刻とクライアントで実行される時刻が異なるため、必ず Hydration エラーが発生します。

エラーメッセージ例

typescriptCopy codeWarning: Text content did not match.
Server: "現在時刻: 2025-11-08 10:00:00"
Client: "現在時刻: 2025-11-08 10:00:05"

解決方法 1：useEffect を使用

クライアント側でのみ値を更新するようにします。

typescriptCopy code// app/routes/_index.tsx
import { useEffect, useState } from 'react';

export default function Index() {
  // 初期値は null または固定値にする
  const [currentTime, setCurrentTime] = useState<
    string | null
  >(null);

  // useEffect はクライアント側でのみ実行される
  useEffect(() => {
    setCurrentTime(new Date().toLocaleString());
  }, []);

  return (
    <div>
      <h1>ようこそ</h1>
      {/* サーバー側では何も表示されず、
          クライアント側でのみ時刻が表示される */}
      {currentTime && <p>現在時刻: {currentTime}</p>}
    </div>
  );
}

この方法では、サーバー側では時刻を表示せず、クライアント側でのみ表示します。初期レンダリング時は時刻が表示されませんが、Hydration 後に表示されるため、エラーは発生しません。

解決方法 2：loader で値を取得

Remix の loader を使用して、サーバー側で取得した値をクライアントでも使用します。

typescriptCopy code// app/routes/_index.tsx
import { json } from '@remix-run/node';
import { useLoaderData } from '@remix-run/react';
import type { LoaderFunctionArgs } from '@remix-run/node';

// サーバー側で実行される loader 関数
export async function loader({
  request,
}: LoaderFunctionArgs) {
  // サーバー側で一度だけ時刻を取得
  const serverTime = new Date().toLocaleString();

  return json({ serverTime });
}

export default function Index() {
  // loader で取得した値を使用
  const { serverTime } = useLoaderData<typeof loader>();

  return (
    <div>
      <h1>ようこそ</h1>
      {/* サーバーとクライアントで同じ値が使用される */}
      <p>サーバー時刻: {serverTime}</p>
    </div>
  );
}

この方法では、サーバー側で一度だけ時刻を取得し、その値をクライアント側でも使用します。両方で同じ値が使われるため、Hydration エラーは発生しません。

どちらを選ぶべきか

#	方法	メリット	デメリット	使用場面
1	useEffect	実装がシンプル	初期表示時に値が表示されない	ユーザー固有の情報（ローカル時刻など）
2	loader	SEO に有利、初期表示から値が見える	サーバーリクエストが必要	サーバー時刻、データベースから取得した値

用途に応じて適切な方法を選択してください。

パターン 2：ブラウザ専用 API を使用している場合

window、document、localStorage などのブラウザ専用 API は、サーバー側では存在しないため、エラーの原因となります。

エラーコード: ReferenceError: window is not defined

問題のあるコード

typescriptCopy code// app/components/UserGreeting.tsx
export default function UserGreeting() {
  // サーバー側では localStorage が存在しないため、
  // エラーが発生する
  const username =
    localStorage.getItem('username') || 'ゲスト';

  return <h2>こんにちは、{username}さん</h2>;
}

エラーメッセージ例

typescriptCopy codeReferenceError: localStorage is not defined
    at UserGreeting (app/components/UserGreeting.tsx:3:20)

解決方法 1：typeof チェックと useEffect

サーバー側では実行されないようにガードします。

typescriptCopy code// app/components/UserGreeting.tsx
import { useEffect, useState } from 'react';

export default function UserGreeting() {
  const [username, setUsername] = useState('ゲスト');

  useEffect(() => {
    // useEffect はクライアント側でのみ実行される
    const storedName = localStorage.getItem('username');
    if (storedName) {
      setUsername(storedName);
    }
  }, []);

  return <h2>こんにちは、{username}さん</h2>;
}

この方法では、初期値として「ゲスト」を使用し、クライアント側で localStorage から値を取得して更新します。

解決方法 2：カスタムフック化

再利用可能なカスタムフックを作成すると、より保守性が高くなります。

typescriptCopy code// app/hooks/useLocalStorage.ts
import { useEffect, useState } from 'react';

export function useLocalStorage(
  key: string,
  defaultValue: string
) {
  const [value, setValue] = useState(defaultValue);

  useEffect(() => {
    // クライアント側でのみ実行
    const storedValue = localStorage.getItem(key);
    if (storedValue !== null) {
      setValue(storedValue);
    }
  }, [key]);

  return value;
}

このカスタムフックを使用すると、コンポーネントがシンプルになります。

typescriptCopy code// app/components/UserGreeting.tsx
import { useLocalStorage } from '~/hooks/useLocalStorage';

export default function UserGreeting() {
  // カスタムフックを使用
  const username = useLocalStorage('username', 'ゲスト');

  return <h2>こんにちは、{username}さん</h2>;
}

解決方法 3：サーバー側で Cookie から取得

より堅牢な実装として、サーバー側でも値を取得できるようにします。

typescriptCopy code// app/routes/_index.tsx
import { json } from '@remix-run/node';
import { useLoaderData } from '@remix-run/react';
import type { LoaderFunctionArgs } from '@remix-run/node';

export async function loader({
  request,
}: LoaderFunctionArgs) {
  // Cookie からユーザー名を取得
  const cookieHeader = request.headers.get('Cookie');
  const username =
    parseCookie(cookieHeader)?.username || 'ゲスト';

  return json({ username });
}

// Cookie をパースする簡易関数
function parseCookie(
  cookieString: string | null
): Record<string, string> | null {
  if (!cookieString) return null;

  return Object.fromEntries(
    cookieString.split('; ').map((cookie) => {
      const [key, value] = cookie.split('=');
      return [key, decodeURIComponent(value)];
    })
  );
}

コンポーネント側では loader から取得した値を使用します。

typescriptCopy code// app/components/UserGreeting.tsx
export default function UserGreeting({
  username,
}: {
  username: string;
}) {
  return <h2>こんにちは、{username}さん</h2>;
}

この方法では、サーバー側でも値を取得できるため、SEO に有利で、初期表示から正しい名前が表示されます。

パターン 3：条件分岐による不整合

サーバーとクライアントで異なる条件分岐をすると、レンダリング結果が変わってしまいます。

エラーコード: Warning: Expected server HTML to contain a matching element

問題のあるコード

typescriptCopy code// app/components/NavigationMenu.tsx
export default function NavigationMenu() {
  // サーバー側では false、クライアント側では true になる
  const isClient = typeof window !== 'undefined';

  return (
    <nav>
      {isClient ? (
        // クライアント側でのみレンダリング
        <div className='client-nav'>
          <a href='/profile'>プロフィール</a>
        </div>
      ) : (
        // サーバー側でのみレンダリング
        <div className='server-nav'>
          <a href='/login'>ログイン</a>
        </div>
      )}
    </nav>
  );
}

このコードは、サーバーとクライアントで異なる DOM 構造を生成するため、Hydration エラーが発生します。

エラーメッセージ例

typescriptCopy codeWarning: Expected server HTML to contain a matching <div> in <nav>.
Server: <div class="server-nav">
Client: <div class="client-nav">

解決方法：条件分岐を統一

サーバーとクライアントで同じ条件を使用します。

typescriptCopy code// app/routes/_index.tsx
import { json } from '@remix-run/node';
import { useLoaderData } from '@remix-run/react';
import type { LoaderFunctionArgs } from '@remix-run/node';

export async function loader({
  request,
}: LoaderFunctionArgs) {
  // セッションやクッキーから認証状態を確認
  const isAuthenticated = await checkAuthentication(
    request
  );

  return json({ isAuthenticated });
}

async function checkAuthentication(
  request: Request
): Promise<boolean> {
  // 実際の認証ロジックをここに実装
  // 例：セッションクッキーの検証など
  return false; // 簡略化のため false を返す
}

コンポーネント側では、loader から取得した値で条件分岐します。

typescriptCopy code// app/components/NavigationMenu.tsx
export default function NavigationMenu({
  isAuthenticated,
}: {
  isAuthenticated: boolean;
}) {
  return (
    <nav>
      {isAuthenticated ? (
        <div className='authenticated-nav'>
          <a href='/profile'>プロフィール</a>
          <a href='/dashboard'>ダッシュボード</a>
        </div>
      ) : (
        <div className='guest-nav'>
          <a href='/login'>ログイン</a>
          <a href='/signup'>新規登録</a>
        </div>
      )}
    </nav>
  );
}

この方法では、サーバーとクライアントの両方で同じ認証状態を使用するため、同じ DOM 構造が生成されます。

パターン 4：HTML 構造の違反

HTML の入れ子ルールに違反すると、ブラウザが自動的に DOM を修正するため、Hydration エラーが発生します。

エラーコード: Warning: validateDOMNesting(...): <div> cannot appear as a descendant of <p>

問題のあるコード

typescriptCopy code// app/components/Article.tsx
export default function Article() {
  return (
    <article>
      <p>
        これは記事の本文です。
        {/* p タグの中に div タグを配置することは HTML 仕様違反 */}
        <div className='highlight'>
          重要な情報がここにあります。
        </div>
      </p>
    </article>
  );
}

エラーメッセージ例

typescriptCopy codeWarning: validateDOMNesting(...): <div> cannot appear as a descendant of <p>.
    at div
    at p
    at article

ブラウザによる自動修正の例

ブラウザは HTML を解析する際、仕様違反を検出すると自動的に DOM を修正します。

htmlCopy code<!-- サーバーから送信された HTML -->
<p>
  これは記事の本文です。
  <div class="highlight">
    重要な情報がここにあります。
  </div>
</p>

htmlCopy code<!-- ブラウザが自動修正した後の DOM -->
<p>これは記事の本文です。</p>
<div class="highlight">重要な情報がここにあります。</div>
<p></p>

この自動修正により、サーバー HTML とクライアント DOM が一致しなくなります。

解決方法：正しい HTML 構造を使用

HTML の入れ子ルールに従った構造に修正します。

typescriptCopy code// app/components/Article.tsx
export default function Article() {
  return (
    <article>
      <p>これは記事の本文です。</p>
      {/* div を p の外に配置 */}
      <div className='highlight'>
        <p>重要な情報がここにあります。</p>
      </div>
    </article>
  );
}

主な HTML 入れ子ルール

以下の表で、よくある違反パターンを確認できます。

#	親要素	子要素として NG	正しい代替
1	<p>	<div>, <p>, <h1>〜<h6>	<span>, <strong>, <em>
2	<a>	<a>, <button>	ネストせず並列に配置
3	<button>	<a>, <button>	<span> でスタイリング
4	<ul>, <ol>	<div>, <p> 直下	<li> で囲む
5	<table>	<div> 直下	<tr>, <td> で囲む

これらのルールを守ることで、ブラウザの自動修正を防ぎ、Hydration エラーを回避できます。

パターン 5：外部ライブラリや拡張機能の影響

ブラウザ拡張機能や外部スクリプトが DOM を改変すると、Hydration エラーが発生することがあります。

発生条件

• 広告ブロッカーが広告関連の要素を削除
• 翻訳拡張機能がテキストを書き換え
• アクセシビリティツールが DOM に要素を追加
• Google Analytics などのトラッキングスクリプトが DOM を操作

診断方法

シークレットモード（プライベートブラウジング）で同じページを開き、エラーが発生するか確認します。

bashCopy code# Chrome の場合
# Cmd+Shift+N (Mac) または Ctrl+Shift+N (Windows/Linux)

シークレットモードでエラーが発生しない場合、ブラウザ拡張機能が原因です。

解決方法 1：suppressHydrationWarning を使用

外部要素の影響を受ける部分に対して、警告を抑制します。

typescriptCopy code// app/components/Layout.tsx
export default function Layout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang='ja'>
      <head>
        <meta charSet='utf-8' />
        <meta
          name='viewport'
          content='width=device-width, initial-scale=1'
        />
        {/* 外部スクリプトが head を変更する可能性がある */}
      </head>
      {/* body 要素に suppressHydrationWarning を追加 */}
      <body suppressHydrationWarning>{children}</body>
    </html>
  );
}

この属性は、その要素の直下の子要素における Hydration 警告を抑制します。ただし、本当に外部要因による場合にのみ使用し、自分のコードの問題を隠すために使用しないでください。

解決方法 2：ClientOnly コンポーネント

特定の部分をクライアント側でのみレンダリングします。

typescriptCopy code// app/components/ClientOnly.tsx
import { useEffect, useState } from 'react';

export default function ClientOnly({
  children,
}: {
  children: React.ReactNode;
}) {
  const [hasMounted, setHasMounted] = useState(false);

  useEffect(() => {
    setHasMounted(true);
  }, []);

  // サーバー側では何もレンダリングしない
  if (!hasMounted) {
    return null;
  }

  // クライアント側でのみ children をレンダリング
  return <>{children}</>;
}

使用例：

typescriptCopy code// app/routes/_index.tsx
import ClientOnly from '~/components/ClientOnly';

export default function Index() {
  return (
    <div>
      <h1>ようこそ</h1>

      {/* 外部スクリプトの影響を受ける可能性がある部分 */}
      <ClientOnly>
        <div id='ads-container'>
          {/* 広告などのコンテンツ */}
        </div>
      </ClientOnly>
    </div>
  );
}

この方法では、サーバー側では該当部分をレンダリングせず、クライアント側でのみレンダリングするため、Hydration エラーが発生しません。

デバッグに役立つツール

Hydration エラーの診断を効率化するツールをご紹介します。

React DevTools の Profiler

React DevTools の「Profiler」タブを使用すると、レンダリングのパフォーマンスと共に、Hydration の問題も可視化できます。

カスタムエラーバウンダリ

Hydration エラーをキャッチして詳細情報を表示するエラーバウンダリを実装できます。

typescriptCopy code// app/components/HydrationErrorBoundary.tsx
import { Component, ErrorInfo, ReactNode } from 'react';

interface Props {
  children: ReactNode;
}

interface State {
  hasError: boolean;
  error: Error | null;
}

export class HydrationErrorBoundary extends Component<
  Props,
  State
> {
  constructor(props: Props) {
    super(props);
    this.state = { hasError: false, error: null };
  }

  static getDerivedStateFromError(error: Error): State {
    return { hasError: true, error };
  }

  componentDidCatch(error: Error, errorInfo: ErrorInfo) {
    // エラー情報をログに記録
    console.error('Hydration Error:', error, errorInfo);

    // 本番環境では、エラートラッキングサービスに送信
    // 例：Sentry.captureException(error);
  }

  render() {
    if (this.state.hasError) {
      // 開発環境でのみ詳細を表示
      if (process.env.NODE_ENV === 'development') {
        return (
          <div
            style={{
              padding: '20px',
              border: '2px solid red',
            }}
          >
            <h2>Hydration エラーが発生しました</h2>
            <pre>{this.state.error?.message}</pre>
            <pre>{this.state.error?.stack}</pre>
          </div>
        );
      }

      // 本番環境では簡潔なメッセージ
      return (
        <div>
          エラーが発生しました。ページを再読み込みしてください。
        </div>
      );
    }

    return this.props.children;
  }
}

このエラーバウンダリで必要な部分を囲むことで、エラー発生時の詳細情報を取得できます。

typescriptCopy code// app/root.tsx
import { HydrationErrorBoundary } from '~/components/HydrationErrorBoundary';

export default function App() {
  return (
    <HydrationErrorBoundary>
      <Outlet />
    </HydrationErrorBoundary>
  );
}

まとめ

Remix の「Hydration failed」エラーは、サーバーとクライアントで生成される DOM の不整合により発生します。本記事で解説した診断手順に従うことで、確実に原因を特定し解決できるようになります。

重要なポイントをまとめると、以下のようになります。

診断の基本ステップ

1. エラーメッセージを詳しく確認し、不一致の内容を把握する
2. React DevTools でコンポーネントを特定する
3. サーバーとクライアントの HTML 出力を比較する
4. 原因パターンに該当するかチェックする
5. 適切な解決方法を適用する

よくある原因と対策

環境依存の値（時刻、ランダム値など）は、useEffect で取得するか loader を使用します。ブラウザ専用 API は、useEffect 内で使用するか、サーバー側で Cookie から取得します。条件分岐は、サーバーとクライアントで同じ値を使用するように統一しましょう。

HTML 構造は、仕様に従った正しい入れ子ルールを守ることが大切です。外部ライブラリの影響は、suppressHydrationWarning や ClientOnly コンポーネントで対処できます。

開発時の心構え

Hydration エラーは、SSR を採用している以上避けられない課題ですが、適切な対処法を知っていれば恐れる必要はありません。エラーが発生したら、焦らず系統的に診断を進めることで、必ず解決できます。

また、開発中から Hydration エラーが発生しにくいコードを書くことを意識すると、後のデバッグ作業が大幅に削減できますよ。

この記事で紹介したテクニックを活用して、快適な Remix 開発を楽しんでください。

関連リンク

• Remix 公式ドキュメント
• React 公式ドキュメント - Hydration
• React Developer Tools
• MDN Web Docs - HTML 要素リファレンス
• Remix Examples - Error Handling