Vercel vs Cloudflare Pages — ホスティング比較

フロントエンド・Jamstackのホスティング先として人気のVercelとCloudflare Pages。どちらもGitプッシュ→自動デプロイを実現しますが、料金体系とエコシステムに大きな違いがあります。

料金比較

項目VercelCloudflare Pages
無料枠Hobby（個人・非商用）Free（商用もOK）
有料Pro $20/月/人Workers Paid $5/月
帯域Free: 100GB, Pro: 1TB無制限
ビルドFree: 6,000分/月Free: 500回/月
サーバーレスServerless FunctionsWorkers（エッジ）
商用利用（無料）×◎

圧倒的な違い: Cloudflare Pagesは帯域無制限・商用無料。Vercelは無料プランでの商用利用が規約上NG。

パフォーマンス

Vercel

  • エッジネットワーク: グローバルCDN
  • ISR（Incremental Static Regeneration）: ページ単位の再生成
  • Edge Functions: エッジでのサーバーレス実行
  • 画像最適化: next/image による自動最適化

Cloudflare Pages

  • 世界310+拠点のCDN: 日本にも複数拠点。レイテンシが低い
  • Workers: V8ベースのエッジランタイム。コールドスタートなし
  • R2/KV/D1: ストレージ・DB等のエッジインフラが充実
  • Smart Placement: 最適なリージョンに自動配置

体感速度: 静的サイトならほぼ同等。エッジコンピューティングの柔軟性はCloudflare優位。

フレームワーク対応

フレームワークVercelCloudflare Pages
Next.js◎（公式）○（@opennextjs/cloudflare）
Astro◎◎
Nuxt◎◎
SvelteKit◎◎
Remix◎◎

Next.jsを使うならVercelが最適解。VercelはNext.jsの開発元であり、最新機能に最速対応。

開発体験

Vercel

  • プレビューデプロイ（PRごとにURLを自動生成）
  • Speed Insights（パフォーマンス計測）
  • Web Analytics
  • AI SDK（Vercel AI SDK）

Cloudflare Pages

  • プレビューデプロイ
  • Wrangler CLI（ローカル開発）
  • Workers AI（推論API）
  • D1/R2/KV等との統合

エコシステム

Vercel

  • Vercel特化サービス: KV, Postgres, Blob Storage, Edge Config
  • フレームワーク: Next.js, Turbopack
  • AI: AI SDK, v0（UIジェネレーター）

Cloudflare

  • 幅広いインフラ: Workers, KV, R2, D1, Queues, Durable Objects, Vectorize
  • セキュリティ: WAF, DDoS防御, Bot Management
  • ドメイン・DNS: レジストラ + DNS（追加コストなし）

Cloudflareはインフラ全体をカバー。ドメイン取得からCDN・WAF・DB・ストレージまで一気通貫。

移行のしやすさ

  • Vercel → Cloudflare: 静的サイト・Astroなら容易。Next.jsのSSR機能を使っている場合は@opennextjs/cloudflare経由で対応（一部制約あり）
  • Cloudflare → Vercel: Workers固有のAPIを使っていなければ容易

まとめ

あなたの状況おすすめ
Next.jsプロジェクトVercel
Astro / 静的サイトCloudflare Pages（無料・帯域無制限）
商用サイトを無料でCloudflare Pages
エッジDB・KV・R2が必要Cloudflare
画像最適化が重要Vercel
チーム開発（Pro機能）Vercel（DX優位）
コスト最優先Cloudflare Pages

結論: Next.jsならVercel、それ以外ならCloudflare Pagesがコスパ最強。個人開発者はCloudflare Pagesの無料枠が圧倒的。

OGP画像のプレビュー確認には OGPプレビューツール をお使いください。

この記事の内容はAssistyのOGPプレビューで実際にお試しいただけます。