ハイドレーションミスマッチとは？

ハイドレーションミスマッチは、クライアントのフレームワークがサーバーレンダリングされた HTML に振る舞いを付与しようとするが、それが計算するマークアップがサーバーの送ったものと一致しないときに起こります。フレームワークは、DOM を再利用できるよう両者が同一であることを期待します。時間依存やブラウザ限定の値などにより両者が異なると、警告を出し、マークアップを破棄して再レンダリングすることがあります。

なぜ重要か

ミスマッチは、読み込み直後に見えるちらつき、失われた状態、動かないコントロールを引き起こします。テストや build 時のチェックで捕まえると、微妙に壊れた最初のレンダリングを出荷せずに済みます。

関連ガイド