Nuxt 3で「Failed to load chunk」問題とその対応まとめ（要約）
本記事では、Nuxt 3を使っていて遭遇した「Failed to load chunk」エラーの原因と、その対処法をまとめています。
SSR × CloudFront環境で発生した実例をもとに分析しました。
TL;DR
-
症状: SSR配信中に
Failed to load chunkが sporadic（断続的）に発生し、ハイドレーションが失敗して500エラーになる。 - 原因: Googlebot や Bingbot の 遅延レンダリング（headlessクロールのタイムラグ）で古い JS chunk を参照していた可能性。
- 参考: Vercel Skew Protection公式解説
-
対応:
-
nuxt.config.tsのrouteRulesでno-cache, must-revalidateを設定 - CloudFrontで
_nuxt/*に対して 60日キャッシュ保持
-
- 結果: エラー件数が日に100件超 → 数件程度に減少。
- その後: Nuxt 3.17.x 以降で遅延レンダリング対策パッチが入り、ほぼ解消。
詳細・設定例はこちら👇
本記事はポートフォリオサイトで全文を公開しています。
SSR構成例やCloudFront設定、routeRules実装例など詳しく解説しています。
👉 詳細版はこちら
https://s-soya.tech/blog/nuxt3-failed-to-load-chunk
📘 まとめ
クローラによる遅延レンダリングは意外と盲点。
キャッシュ戦略やrouteRulesの設定で“古いchunk参照”を防ぎ、安定したSSR配信を目指そう。
✍️ 著者
Soya — Engineer Portfolio
Next.js + Tailwind CSS で構築したエンジニアポートフォリオサイトです。