Open2
React まとめ
yuuki008Hydration ってなんやねん
サーバーサイドで生成された HTML ( SSR ) にイベントハンドラーをアタッチしていく処理。
SSR は、サーバー側で事前に HTML を 生成することで CSR で発生する「インタラクティブな状態になるまでにページに何も表示されない」という問題を解決する。サーバー側で生成される HTML にはイベントがアタッチされていないので、ブラウザ側でイベントハンドラーをアタッチする ( Hydration )。
Error: Hydration failed because the initial UI does not match what was rendered on the server.
React を触っているとめちゃくちゃよく出るエラー。
While rendering your application, there was a difference between the React tree that was pre-rendered from the server and the React tree that was rendered during the first render in the browser (hydration).
Hydration is when React converts the pre-rendered HTML from the server into a fully interactive application by attaching event handlers.
https://nextjs.org/docs/messages/react-hydration-error
サーバー側で事前生成された HTML とブラウザ 1 発目のレンダリングで生成された HTML に違いがあるのが原因で発生しているエラー。
yuuki008レンダリング