発生した問題

本番環境で新しく作成したコンテンツページ（/2025-12-26/prompts/prompt-urawa）が表示されなかった。

症状

• ローカルでは正常に表示される
• git push でデプロイ完了後もページが表示されない
• WebFetchツールでは内容が取得できる（サーバー側は正常）
• ブラウザでアクセスすると空白または古い状態

原因

ブラウザキャッシュが原因だった。

ブラウザキャッシュとは

一度取得したリソース（HTML、CSS、JS、画像など）をローカルにブラウザは保存し、次回アクセス時に再利用する。これにより：

• ページ読み込みが高速化
• サーバー負荷が軽減
• 通信量が削減

キャッシュの種類

なぜ今回の問題が発生したか

[デプロイ前]
ユーザー → Cloudflare → 旧コンテンツ（またはページなし）
              ↓
         ブラウザがキャッシュ保存

[デプロイ後]
ユーザー → ブラウザキャッシュ → 旧コンテンツを表示
              ↑
         サーバーに問い合わせない

SPAの特殊性

クライアントサイドルーティングを使用するNuxt 3（SPA/SSGモード）では：

1. 初回アクセス時にJSバンドルがキャッシュされる
2. 以降のページ遷移はキャッシュされたJSが処理
3. 新しいページが追加されても、古いバンドルには含まれていない

解決方法

即時解決（ユーザー側）

ハードリロードを実行：

これによりキャッシュを無視してサーバーから最新を取得する。

キャッシュ完全クリア

1. DevToolsを開く（F12）
2. Networkタブ → 「Disable cache」にチェック
3. リロード

または：

1. 設定 → プライバシーとセキュリティ → 閲覧データを削除
2. 「キャッシュされた画像とファイル」を選択して削除

開発時のベストプラクティス

DevToolsを開いた状態でテストする（キャッシュが無効化される）

// nuxt.config.ts でキャッシュ制御ヘッダーを設定
export default defineNuxtConfig({
  routeRules: {
    // 動的コンテンツはキャッシュしない
    '/api/**': { cache: false },
    // 静的アセットは長期キャッシュ
    '/_nuxt/**': {
      headers: {
        'cache-control': 'public, max-age=31536000, immutable'
      }
    }
  }
})

Cloudflare側の対策

キャッシュパージ

デプロイ後にCloudflareのキャッシュをパージする：

1. Cloudflare Dashboard → キャッシュ → 設定
2. 「すべてをパージ」または特定URLをパージ

GitHub Actions で自動パージ

- name: Purge Cloudflare Cache
  run: |
    curl -X POST "https://api.cloudflare.com/client/v4/zones/${{ secrets.CF_ZONE_ID }}/purge_cache" \
      -H "Authorization: Bearer ${{ secrets.CF_API_TOKEN }}" \
      -H "Content-Type: application/json" \
      --data '{"purge_everything":true}'

今後の確認手順

デプロイ後に新しいコンテンツが表示されない場合：

1. WebFetch/curlで確認 - サーバー側が正常か確認
2. ハードリロード - Ctrl + Shift + R
3. DevTools確認 - Networkタブでキャッシュ状況を確認
4. シークレットモード - キャッシュなしで確認

関連リソース

• MDN - HTTP キャッシュ
• Cloudflare - キャッシュの仕組み
• Nuxt - キャッシュ設定