react 18+ · JavaScript
メッセージ
Hydration failed because the initial UI does not match what was rendered on the server
何を意味するか
サーバが送ってきた HTML と、ブラウザが最初の描画で作った結果が違うため、React が両者を繋げられなかったという意味です。描画の中で new Date() や Math.random() を使う、localStorage を読む、window の幅で描き分ける — これらは必ずサーバとブラウザで答えが変わります。<p> の中に <div> を入れたようにブラウザがタグを直してしまう場合も同じ結果です。最初の描画ではサーバと同じものを描き、変わる部分は useEffect が走った後で変えるのが定石です。その代償として、その部分は一瞬遅れて現れ、サーバの HTML には含まれません。React 19 では同じ状況が "the server rendered HTML didn't match the client" と書かれ、どこが違ったかの差分まで出ます。
直しかた
一行の命令では終わりません。何を見るべきかを説明に書いてあります。
- 出す道具
- react 18+
- JavaScript
- 15
ブラウザと node の誤りは、たいてい何が壊れたかだけを告げ、なぜその値がそうなったかは告げません — undefined を読んだ、関数ではなかった、JSON ではなかった。ですから直す場所は投げた行ではなくその値を作った上流であり、?. や既定値でその行だけ黙らせると、同じ問題がもっと遠くで、もっと分かりにくい形で戻ってきます。
エラーメッセージの読み方
- 一行目から読みます。下に行くほど道具の内部の話で、原因はたいてい一番上に書かれています。
- ファイル名と行番号があればそこが出発点です — スタックの最上段ではなく、自分が書いたファイルが出てくる一番上の行です。
- 文句はそのまま検索します。ただし自分のパスや変数名は消します — その部分が検索を邪魔します。
- 同じ事情が道具の版ごとに違う言い方で出ます。結果が合わないときは版番号も入れてみます。
- 直す命令を貼る前に、その命令が何を捨てるかを確かめます。取り消せないものが混ざっています。
よくある質問
Q. Hydration failed because the initial UI does not match what was rendered on the server はどういう意味ですか。
サーバが送ってきた HTML と、ブラウザが最初の描画で作った結果が違うため、React が両者を繋げられなかったという意味です。描画の中で new Date() や Math.random() を使う、localStorage を読む、window の幅で描き分ける — これらは必ずサーバとブラウザで答えが変わります。<p> の中に <div> を入れたようにブラウザがタグを直してしまう場合も同じ結果です。最初の描画ではサーバと同じものを描き、変わる部分は useEffect が走った後で変えるのが定石です。その代償として、その部分は一瞬遅れて現れ、サーバの HTML には含まれません。React 19 では同じ状況が "the server rendered HTML didn't match the client" と書かれ、どこが違ったかの差分まで出ます。
Q. どう直しますか。
一行の命令では終わりません。何を見るべきかを上の説明に書いてあります。
Q. どの道具が出すエラーですか。
react 18+ です。JavaScriptの仲間で、文句は15語です。