1. 問題発見
自分が作った給食サイトを見ていたら、突然以下のような問題を発見した。
ああ... こんな問題耐えられない...
クリックして入ってみたら、Hydration failed という内容だった。
簡単にまとめると、サーバーでレンダリングしたページとクライアントに見えるページが違うということ。
原因は様々だという。
2. 公式ドキュメント
Nextjs公式ドキュメントには、hydration errorの原因として以下の内容が指摘されていた。
間違ったHTMLタグの使用
<p>タグ内の<p>タグのネスト
<p>タグ内の<div>タグのネスト
<p>タグ内の<ul>タグや<ol>タグのネスト
typeof window !== 'undefined'のようなロジックの使用レンダリングロジックで
windowやlocalStorageのようなブラウザ用APIを使用レンダリングロジックにDate()のような時間依存APIを使用
HTMLを修正するブラウザ拡張プログラム
間違ったCSS in JSライブラリ
Cloudflare自動縮小のようなHTML応答を修正しようとする誤って構成されたEdge/CDN
しかし、何度見ても該当するものが何もなかった。
そこで、最初から最後までデバッグを行うことにした。
3. デバッグプロセス
コードを一行ずつコメントアウトして保存しながら、どの部分がエラーを出しているのかを探した。
あら、これだからdev環境で開発するんですね。
そのようにしてエラーを見つけていったところ、Lunchコンポーネントでエラーが発生していることが判明した...
わかりました...
それで、すぐにLunchに入り、また一つ一つコメントアウトしてみた。
やっているとおかしいことに、inputタグがhydration failedの原因だった。
いろいろな方法で試してみたが、scale-0、opacity-0など、要素を隠すすべてのclassNameがエラーを引き起こした！
新しく変更しようと思ったが、気に入らないし面倒くさかった。
4. 解決策
こんな無駄なエラーは無視するのが答えだ。
大したことないのにいたずら好きですね。
該当要素にsuppressHydrationWarning属性を追加する。
そうすると、エラーが出なくなる。
5. 後記
私と同じ状況になることはなく、かなり迷った。
プログラミングを独学していると、時には簡単な問題でも非常に時間がかかることが多い。
この記事が少しでも役に立てばと思う。
댓글을 불러오는 중...