Hydration failed エラーを解決する

1. 問題発見

自分が作った給食サイトを見ていたら、突然以下のような問題を発見した。

ああ... こんな問題耐えられない...

クリックして入ってみたら、Hydration failed という内容だった。

簡単にまとめると、サーバーでレンダリングしたページとクライアントに見えるページが違うということ。

原因は様々だという。

2. 公式ドキュメント

Nextjs公式ドキュメントには、hydration errorの原因として以下の内容が指摘されていた。

1. 間違ったHTMLタグの使用

   1. <p>タグ内の<p>タグのネスト

   2. <p>タグ内の<div>タグのネスト

   3. <p>タグ内の<ul>タグや<ol>タグのネスト

2. typeof window !== 'undefined'のようなロジックの使用

3. レンダリングロジックでwindowやlocalStorageのようなブラウザ用APIを使用

4. レンダリングロジックにDate()のような時間依存APIを使用

5. HTMLを修正するブラウザ拡張プログラム

6. 間違ったCSS in JSライブラリ

7. Cloudflare自動縮小のようなHTML応答を修正しようとする誤って構成されたEdge/CDN

しかし、何度見ても該当するものが何もなかった。

そこで、最初から最後までデバッグを行うことにした。

3. デバッグプロセス

コードを一行ずつコメントアウトして保存しながら、どの部分がエラーを出しているのかを探した。

あら、これだからdev環境で開発するんですね。

そのようにしてエラーを見つけていったところ、Lunchコンポーネントでエラーが発生していることが判明した...

わかりました...

それで、すぐにLunchに入り、また一つ一つコメントアウトしてみた。

やっているとおかしいことに、inputタグがhydration failedの原因だった。

いろいろな方法で試してみたが、scale-0、opacity-0など、要素を隠すすべてのclassNameがエラーを引き起こした！

新しく変更しようと思ったが、気に入らないし面倒くさかった。

4. 解決策

こんな無駄なエラーは無視するのが答えだ。

大したことないのにいたずら好きですね。

該当要素にsuppressHydrationWarning属性を追加する。

そうすると、エラーが出なくなる。

5. 後記

私と同じ状況になることはなく、かなり迷った。

プログラミングを独学していると、時には簡単な問題でも非常に時間がかかることが多い。

この記事が少しでも役に立てばと思う。