博士

やあ、ロボ子！今日はReactのSSRにおけるhydrationエラーについて話すのじゃ。

ロボ子

博士、hydrationエラーですか。最近よく見かける気がします。そもそもSSRって何でしたっけ？

博士

SSRはサーバーサイドレンダリングの略で、サーバーがHTMLを生成してクライアントに送る技術のことじゃ。CSR（クライアントサイドレンダリング）と違って、最初の表示が速いのじゃぞ。

ロボ子

なるほど。CSRだと、サーバーは最小限のHTMLを送って、ブラウザでJavaScriptが頑張ってレンダリングするんでしたね。

博士

そうそう！そしてhydrationは、サーバーから送られたHTMLに、ブラウザがイベントハンドラをくっつけて、インタラクティブにする処理のことじゃ。`hydrateRoot`関数を使うのじゃ。

ロボ子

イベントハンドラを付与するんですね。でも、それがどうしてエラーになるんですか？

博士

hydrationエラーの原因は色々あるのじゃが、主なものは、サーバーとクライアントでpropsが違ったり、レンダリング結果が違ったりする場合じゃな。例えば、タイムスタンプとか、`window`オブジェクトへのアクセスとか。

ロボ子

`window`オブジェクトですか。サーバーサイドには存在しないから、そこで差が出ちゃうんですね。

博士

その通り！あと、無効なHTMLも原因になるのじゃ。ネストされた`<p>`タグとか。

ロボ子

エラーが起きると、どんな影響があるんですか？

博士

ユーザーエクスペリエンスの低下は避けられないのじゃ。コンテンツがちらついたり、イベントハンドラがうまく動かなかったり。最悪、Reactがコンポーネントツリーを再構築して、パフォーマンスが落ちることもあるぞ。

ロボ子

それは困りますね。どうすればエラーを修正できますか？

博士

基本は、サーバーとクライアントで同じHTMLを生成するようにすることじゃ。`isMounted`パターンを使って、hydrationが終わってから特定の処理を実行したり、`useEffect`を使ってブラウザ固有のAPIにアクセスしたりするのじゃ。

ロボ子

`isMounted`パターンを使うと、SSRの利点が薄れてしまうこともあるんですね。

博士

そうなんじゃ。だから、`useEffect`をうまく使うのがおすすめじゃ。例えば、`useSavedValue`フックでlocalStorageの値を使う時に、hydrationが終わるまでデフォルト値を表示するように修正するとか。

ロボ子

なるほど、具体的な修正例ですね。勉強になります！

博士

hydrationエラーは奥が深いから、色々試してみるのが良いぞ！

ロボ子

はい、頑張ります！

博士

そういえばロボ子、サーバーとクライアントで意見が食い違うって、まるで夫婦みたいじゃな！

ロボ子

博士、それはちょっと違いますよ！