Vercelで動作するNuxtアプリのサーバーレス実行回数を削減するキャッシュ設定
makedream١ مايو ٢٠٢٦
0
Computing/SoftwareRelated Video
36:54▲ コミュニティーセッション：Vercel での Nuxt 活用術
Vercel
Comments (0)
Log in to leave a comment
No posts yet
makedream36:54makedream36:54Vercel
Log in to leave a comment
No posts yet
NuxtのNitroエンジンはどこでもスムーズに動作するように見えますが、Vercel Edge Runtimeにデプロイした瞬間に状況は一変します。ローカルでは問題なく動いていた sharp や bcrypt のようなライブラリが、デプロイ直後に500エラーを吐き出す理由は、Vercel EdgeがNode.js標準モジュールへのアクセスを制限しているためです。私はデプロイボタンを押す前に、必ず npx vercel build を実行します。Linuxベースの環境を事前にシミュレーションしておかなければ、深夜3時にランタイムエラーと格闘することになる確率が非常に高いからです。
安定した運用を望むなら、nuxt.config.ts でプリセットを vercel-edge ではなく、通常の vercel として明示する方が安全です。すべてのAPIをエッジで動かす必要はありません。環境変数も process.env を直接呼び出すのではなく、Nitroの useRuntimeConfig で標準化してください。この些細な習慣が、デプロイ後に発生するランタイムエラーの80%を取り除いてくれます。
Vercelの請求書の主な原因は、サーバーレス関数の実行時間と呼び出し回数です。Nitro 3で提供される routeRules は、このコストを物理的に削り落とす最も強力なツールです。stale-while-revalidate (SWR) 戦略を適切に使用すれば、APIリクエストが1万回発生しても、実際の関数実行はたった1回で済みます。ユーザーにはミリ秒単位の高速なレスポンスを提供しながら、財布を守るスマートな方法です。
コストを40%以上削減する具体的な設定です。
nuxt.config.ts の routeRules オブジェクトでキャッシュするパスを指定します。swr: 3600 を追加し、1時間バックグラウンド更新モードをオンにします。cache オプション内に maxAge と staleMaxAge を明示し、CDNがキャッシュを保持する時間を定義します。これにより、Vercelダッシュボードでサーバーレス関数の呼び出し回数が垂直に落下することを確認できるはずです。
サーバーが生成したHTMLとクライアントのJavaScriptが衝突した際に発生するハイドレーションエラーは、アプリを不安定にします。Nuxt 4ではこれを解決するために、 useAsyncData 呼び出し時に deep: false をデフォルトで使用するように設計されました。不要なオブジェクト追跡を諦める代わりに、メモリを節約し、サーバーの状態をクライアントへ安全に引き継ぎます。
データの不一致を防ぎ、ペイロードサイズを削減するために次の3つのルールを適用してください。
pick オプションを使用し、テンプレートのレン더リングに不可欠なキー値だけを抽出します。これだけでペイロードサイズを最大50%削減できます。useId() を使い、サーバーとクライアントの識別子を一致させます。<NuxtTime> コンポーネントで囲み、ブラウザのロケールに基づいて処理させます。プロジェクトが大規模になると、Vercelのビルドコンテナが提供する8,192MBのメモリでも不足することがあります。正確には、Node.jsのデフォルトのヒープサイズが使用可能メモリより小さく設定されているため、ガベージコレクションが頻発し、最終的にビルドが停止してしまいます。
ビルド速度を向上させ、デプロイ失敗を防ぐには、以下の設定をすぐに適用してください。
NODE_OPTIONS="--max-old-space-size=4096" を追加します。ヒープメモリの制限を緩和するだけで、ビルドのボトルネックが解消されます。npx nuxt analyze を実行して、重いサーバー専用の依存関係がクライアントバンドルに混入していないか確認し、 #server エイリアスで隔離します。server/middleware/ の重いロジックを、特定のパスのイベントハンドラー内部に移動させ、サーバーバンドルのサイズを削減します。この環境構成を完了すれば、CI/CDパイプラインの待機時間が短縮され、デプロイ失敗率が顕著に低下します。