ReactやNext.jsで開発していると、一度は遭遇するであろうハイドレーションエラー。
見た目には問題ないのに、コンソールにエラーが出て不安になる…そんな経験はありませんか？

ハイドレーションエラーは、サーバーサイドレンダリング（SSR）とクライアントサイドの描画結果に差異がある場合に発生します。
本記事では、そのメカニズムと原因、そして再発させないための具体的な対策を、初心者にもわかりやすく整理しました。

---

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

ハイドレーションとは、SSRで描画されたHTMLに対してクライアント側でReactがイベントバインドなどを行うプロセスのこと。
この際、サーバーで生成されたHTMLとクライアントでのJSによる描画結果が一致しない場合に、次のようなエラーが出力されます。

arduinoCopy codeWarning: Text content did not match. Server: "Hello" Client: "Hi"

原因となる具体例は以下の通りです：

原因	説明	例
クライアント限定APIの使用	windowやnavigatorなど、SSR時に存在しないオブジェクトを利用	useEffect外でwindow.innerWidthを参照
ランダム値の使用	SSRとCSRで異なる値になる	Math.random()やDate.now()の直接使用
状態の非同期取得	クライアントでのみデータを取得してUIを更新する	初期表示がloading、CSR後にデータになる差異
時刻やロケールに依存	タイムゾーンやIntlにより描画が変化	日付のローカライズ表示など

---

ハイドレーションエラーを防ぐための対策

ハイドレーションエラーを避けるためには、サーバーとクライアントで同じHTMLを出力することが鉄則です。
以下に具体的な対策を紹介します。

1. クライアント限定処理はuseEffect内に記述

ReactのuseEffectはクライアント実行時のみ動作します。
windowなどのブラウザAPIを使用する場合は、必ずこの中で処理しましょう。

tsxCopy codeconst [width, setWidth] = useState(0);

useEffect(() => {
  setWidth(window.innerWidth);
}, []);

2. ランダム・時刻系の値はSSR側でも揃える

例えばDate.now()を直接使わず、getServerSidePropsやgetStaticPropsで生成し、Propsとして渡すようにします。

tsxCopy codeexport const getServerSideProps = () => {
  return {
    props: {
      timestamp: Date.now(),
    },
  };
};

3. dynamic()を使ってクライアントのみレンダリング

どうしてもSSRで描画したくないコンポーネントは、next/dynamicでクライアント限定に。

tsxCopy codeimport dynamic from 'next/dynamic';

const ClientOnlyComponent = dynamic(() => import('./ClientOnlyComponent'), {
  ssr: false,
});

4. 条件付きレンダリングで安全確認

typeof window !== "undefined"のようなチェックを使い、SSR時の実行を防ぐ工夫も効果的です。

tsxCopy code{typeof window !== "undefined" && <ClientOnlyComponent />}

---

まとめ：Next.jsではSSRとCSRの一貫性が鍵

ハイドレーションエラーは、見た目に影響が出ないことも多いため軽視されがちですが、SEOやパフォーマンス、アクセシビリティに悪影響を与える可能性があります。

ハイドレーションの原理と原因を正しく理解し、以下のポイントを抑えて開発を進めましょう。

• SSRとCSRで出力を一致させる
• クライアント専用処理はuseEffectへ
• 不安定な値（日時、乱数、ブラウザAPI）はSSR中に扱わない
• dynamic()でSSRを明示的に制御

これらを意識するだけで、Next.jsでの開発がより安定し、安心してスケールするアプリケーションを構築できます。