• #nuxt
  • #cloudflare-pages
  • #performance
  • #troubleshooting

発生していた現象

  • /blog を本番でリロードすると一覧が空になる。
  • ブログ一覧から記事詳細へ初回遷移すると体感 ~1s かかる(2回目以降は速い)。

対応で試したことと結果

  1. デプロイ方式を SSG に固定
    • package.jsonpnpm generate && wrangler pages deploy dist に変更し、postgeneratedist/_routes.json を再生成。
    • 結果: /blog リロードで一覧が正しく表示されるようになった。__nuxt_content への D1 呼び出しは発生しない。
  2. 記事ページの余計なクエリ削減
    • app/pages/[...slug].vue で、単一記事表示時は queryCollection("pages").all() を実行しないようガード。ディレクトリ一覧時のみ必要フィールドに絞って取得。
    • 期待: _payload.json の肥大化抑制 → 初回遷移のデータ転送量を削減。
  3. NuxtLink プリフェッチを有効化
    • ArticleTable.vueBlogCalendar.vue:prefetch="false" を削除しデフォルト有効に戻した。
    • 期待: 一覧→記事への初回遷移で必要チャンクを事前取得し体感を短縮。
  4. デプロイ時のパス誤り修正
    • .output/public ではなく dist をデプロイ対象に統一し、postgenerate も同じパスで動くよう修正。
    • これにより wrangler pages deploy dist がエラーなく通る。

参考ログ

  • pnpm deploy:cloudflare 実行時、Nuxt generate で 127 ルート prerender 済み(dist/_payload.json 生成)。
  • 生成物サイズ例: dist/blog/_payload.json 約 56 KB、search/_payload.json 約 5.7 MB(検索ページは大きい)。
  • 本番での簡易計測: https://log.eurekapu.com/2025-12-06/thinkpad-trackpoint-keyboard-scroll-fix 初回取得 ~0.4s、_payload.json 約 6 KB。

現状の結論

  • 一覧リロード問題は SSG 固定で解消。
  • 初回遷移はプリフェッチ有効化と _payload 縮小で改善見込み。さらに短縮したい場合は、クライアント側で不要な sqlite WASM 読み込みを避ける(server: true オプションでサーバ取得に限定する)など追加チューニング検討。