Reactでのハイドレーションエラー解決法: 初期UI不一致の対処-スケ郎のお話

はじめに

Reactアプリケーションでサーバーサイドレンダリング（SSR）を使用している際に、以下のようなエラーメッセージに遭遇することがあります。

Error: Hydration failed because the initial UI does not match what was rendered on the server.

このエラーは「ハイドレーション失敗」とも呼ばれ、サーバーでレンダリングされたHTMLとクライアントで生成されたHTMLが一致しない時に発生します。主にHTMLの記述ルール違反が原因です。以下ではこのエラーの解決方法を具体的な例を交えて解説します。

このエラーの一般的な原因は、HTMLの規則に反する書き方が存在することです。たとえば、HTMLの <p> タグ内に <div> タグが含まれる場合などです。
私場合、次のように<table> 要素内で <tr> タグを忘れたことがエラーの原因でした。

<table>
  <thead>
    <th>COL</th>
    <th>COL</th>
  </thead>
  ...
</table>

コンソールのエラーメッセージを確認する: 開発者ツールのコンソールに表示されるエラーメッセージや警告を確認し、問題のあるコンポーネントを特定します。
マークアップの検証: エラーが発生している部分のHTMLマークアップが正しいか検証します。HTMLバリデータを使うのも一つの方法です。
コンポーネントのレンダリングを確認: サーバーサイドとクライアントサイドで同じ内容がレンダリングされているか確認します。特に、条件付きレンダリングがある場合は、その条件が両環境で一致しているかを検証します。
環境依存のコードのチェック: クライアント固有のAPI（例：windowやdocument）がSSR中に呼び出されていないか確認します。

このエラーは初めは理解しにくいかもしれませんが、とにかく、HTMLの標準に従ってタグが書かれているか確認しましょう。