起きたこと
Next.js（SSG）で構築したサイトをバージョンアップしてレンタルサーバー環境にデプロイしたあと、次のような現象が起きました。
-
通常のリロードでは問題なく表示される
-
シークレットウィンドウでも問題なし
-
しかし Cmd + Shift + R（スーパーリロード）をすると
-
コンソールに 503エラーが数十件表示される
-
フォントや画像が読み込まれず、ページが一部表示されなくなる
-
サーバーは、
ロリポップのレンタルサーバー（スタンダードプラン）
を使用していました。
エラーが出ていたのは主に次のようなパスです。
/_next/static/media/*.woff2
いずれも Next.js が SSG ビルドで生成した静的ファイルでした。
結論
原因は Next.js やコードの不具合ではなく、
サーバー側のキャッシュを無効化していたことでした。
スーパーリロードではブラウザキャッシュが無視され、
Next.js が生成した大量の静的アセットを 一斉に取得します。
その際、キャッシュ層を通らず オリジンサーバに直接アクセスが集中し、
サーバーが耐えきれず 503（Service Unavailable）を返していました。
サーバ側キャッシュ（ロリポップ！アクセラレータ）を ON にしたところ、
503エラーは完全に解消しました。
503はコードエラーではない
503（Service Unavailable）は、
「サーバは存在するが、今は処理できない」
という意味です。
今回503になっていたのは API や HTML ではなく、
/_next/static/* 配下の 静的ファイルでした。
つまり、
-
ファイルが存在しない（404）わけではない
-
アプリケーションエラーでもない
→ サーバの一時的な過負荷や制限
が原因です。
実際、同じURLを curl で以下のように単発取得すると常に 200 が返りました。
curl -I https://test.com/_next/static/media/0123456789abcde-s.p.123c456b.woff2
なぜスーパーリロードでだけ503が出るのか
通常リロード
-
ブラウザキャッシュを利用
-
すでに取得済みの JS / CSS / フォントは再取得しない
-
サーバへの負荷が低い
スーパーリロード（Cmd + Shift + R）
-
ブラウザキャッシュを完全に無視
-
JS / CSS / 画像 / フォントを 同時に大量取得
-
Cache-Control: no-cacheが付与される
つまりスーパーリロードは、
「キャッシュなし初回アクセスを、最大並列で叩く操作」
になります。
Next.js（SSG）はキャッシュ前提で設計されている
Next.js の SSG が出力する静的アセットには、重要な特徴があります。
ファイル名にハッシュが付く
例：
90d33ae700474423-s.23b6629a.woff2
180c9ce3ba6f4bb0.css
-
中身が変わるとファイル名が変わる
-
古いキャッシュが残っても問題にならない
-
キャッシュ更新は自動
つまり Next.js の SSG は、
静的アセットを強くキャッシュする前提
で設計されています。
今回の原因
本番環境では ロリポップ！アクセラレータ（サーバキャッシュ）を OFF にしていました。
その結果、
-
スーパーリロードで大量の静的ファイルを同時取得
-
すべてオリジンサーバに直接到達
-
瞬間的に処理しきれない
-
一部リクエストを 503 で間引く
-
フォントや画像が一部読み込まれない
という挙動になっていました。
解決策
ロリポップ！アクセラレータを ON（初期設定）に変更
これだけで、
-
スーパーリロード時の 503 → 0
-
フォント・画像欠落 → 解消
-
ページ表示 → 安定
しました。
※ 拡張子限定モードでは woff2 が対象外になる可能性があるため、
Next.js（SSG）では 初期設定 が無難です。
まとめ
-
大量の503は コードのバグではなかった
-
原因は キャッシュなしでの大量静的取得
-
Next.js SSGは キャッシュ前提の設計
-
サーバ側キャッシュを有効にして解決
参考
-
Next.js 公式ドキュメント (Caching)
https://nextjs.org/docs/app/building-your-application/caching -
Next.js 公式ドキュメント (Static Assets)
https://nextjs.org/docs/app/building-your-application/optimizing/static-assets -
MDN Web Docs (Cache-Control)
https://developer.mozilla.org/ja/docs/Web/HTTP/Headers/Cache-Control -
ロリポップ！アクセラレータ公式
https://lolipop.jp/manual/user/accelerator/
採用拡大中！
アシストエンジニアリングでは一緒に働くフロントエンド、バックエンドのエンジニア仲間を募集しています！
少しでも興味ある方は、カジュアル面談からでもぜひお気軽にお話ししましょう！
お問い合わせはこちらから↓
https://official.assisteng.co.jp/contact/