😺
Cloudflare PagesでSSGをした際に「Hydration〜」エラーが発生するときの対処法
Clouflare Pagesにてホストしてあるウェブサイトにて、Nuxtのバージョンを２→３へのマイグレーション作業を行っていました。
ローカルで完全動作することを確認した後、CF PagesにデプロイしたらHTMLのレンダリングが壊れて二重表示になってしまいました。DevToolsで見ると「Hydration completed but contains mismatches」とのエラーが。
ローカルでnpm run generate && npx serve .output/publicでビルド＆テストをしてみると表示されないので、CF側特有の問題かなーと思いGoogleに聞くとAstro.jsのサイトがヒット。
ざっくりいうと「Cloudflareを使ってSSGしたいなら、設定からAuto MinifyをOFFにしなさい」とのこと。
OFFにしてデプロイを再試行すると問題なく動作しました。
Discussion