**fRemix**で作ったブログに**fGoogle Adsense**を導入しました。その際に**fhHydrationエラー**が発生し、急激に遅くなりました。 **fHydrationエラー**の原因は、**fReact**によるバグが原因でした。 Reactを**fhカナリアリリース版**に**fアップデート**することで対処しました。 その**f経緯**ついてまとめています。

**fGoogle AdSense**は**fサービス収益化**する際に使われるサービスです。 自サイトに**fscript**を埋め込むことで、Googleに広告を出稿してもらえます。 Google Adsenseの**f適格性審査**の際には、 **f・ads.txt** **f・MetaデータにGoogle Adsenseに関する情報** **f・HeadにGoogleAdsenseのscript** 上記の３つすべてを組み込むことが求められます。

**f・HeadにGoogleAdsenseのscript** これが原因です。react(安定版v18.3.1)だと、Headにスクリプトを埋めこんで変化させると、**fHydration Error**が発生します。 **fHydration Error**が発生することで、**fhすべてが再レンダリングされてページスピードが低下**します。 現在いくつかの対策がありますが、どれも進んで導入したくない方法です。

**fカナリアリリースバージョン**は**fReact安定版**よりも新しいバージョンです。 //アップデート方法

ただし、**f実験的なバージョン**なのでエラーが発生することも想定する必要があります。 **fnext js**では、ユーザーに**fカナリアバージョン**を利用させることで、この**fHydrationエラー**を回避しているみたいです。

・**lf[Remix is-land(GitHubリンク)](https://github.com/Xiphe/remix-island)** 上記のパッケージを利用することでも回避できるみたいですが、製作者の方のGitHubディスカッションを読むと、カナリアリリース版を利用することを推奨していそうでした。

他の**fHydrationエラー**が発生するケースで、自分が遭遇したケースについてまとめます。 ・**lf[時刻設定に起因するHydrationエラーの記事](https://kotoriforblog.com/search/sub-category/elin/1)** 上記の記事が非常に役に立ちました。 このブログでは、cloudflare d1(データベース)で保存する際はUTC（国際標準時）に設定し、表示するときに日本時間に変換しています。それによって、Hydrationエラーを回避しました。

Reactに起因するエラーは初めてだったので原因の特定に時間がかかりました。 適格性審査の間は、scriptをHeadに置く必要があります。 ただ合格後は自由なので、Bodyにおいてlazyローディングなどで工夫することで高速化を目指すこともできます。

Remixに関する関連記事は他にもあるので是非読んでいってください。