Nuxt 3でfailed to load chunk問題とその対応まとめ

本記事では、Nuxt 3を使っていて遭遇した様々な問題と、それに対する対応策をまとめています。
参考になれば幸いです！

Nuxt3 SSR × CloudFront × chunkエラー問題

発生した問題

AWS CloudFrontを経由してSSR配信しているNuxt 3アプリで、Failed to load chunk何某というエラーメッセージがアクセス数に対し低い割合であるが発生。
ssrされたhtmlに記載されるjs chunkファイルがうまく読み込めず結果としてハイドレーション処理がうまく行えず500エラーになってしまいブラウザでページが表示できない。

原因

google botやbingbotによる遅延レンダリングによるものと推察している。

vercel CTOによる記事(change logであるが)では、「クローリングとヘッドレスブラウザによるレンダリングで数週間の遅延があり。この間にデプロイを繰り返すとリソースのダウンロードに失敗することがある」と記載

参考文献:
・Automatic mitigation of Google and Bing crawl delay, via Vercel’s Skew Protection

・skew protectionについて

対応内容

• nuxt.config.ts の routeRules を活用して、ページ単位でのキャッシュ制御を強化(no-cache, must-revalidateを設定)
• CloudFrontで_nuxt/*に対し60日間の保持を設定
  bot向け対策

結果と今後

多いときは日に100何件あったが、エラー件数は0件 - 3件に収束
まだ対応して1か月弱なので、botが古い版を保持していると楽観的な観測
あと1か月少しは様子を見ていこうと思っている。