VercelとCloudflare Pages、どちらを選ぶ？用途別の使い分けガイド

どちらも「無料で使えるホスティング」、でも中身は全然違う

モダンなウェブサイトをデプロイするとき、VercelとCloudflare Pagesは必ずといっていいほど候補に挙がります。どちらも無料プランが充実していて、GitHubと連携した自動デプロイができる——でも、向いている用途は異なります。

Vercelとは

VercelはNext.js（Reactベースのフレームワーク）を開発した会社が運営するホスティングサービスです。Next.jsとの親和性が極めて高く、SSR（サーバーサイドレンダリング）やISR（インクリメンタル静的再生成）といったNext.js特有の機能をそのまま動かせます。

Vercelの強み

• Next.jsとの完全な互換性
• エッジ関数・APIルートのサポート
• プレビューデプロイが使いやすい（プルリク単位でURLが発行される）
• 分析ダッシュボードが充実

Vercelの注意点

• 無料プランの帯域・実行時間制限がある
• 無料のHobbyプランは非商用の個人利用に限定。商用利用はPro（月額20ドル〜）以上が必須（広告掲載・アフィリエイト・有償の受託制作なども商用扱い）

Cloudflare Pagesとは

Cloudflare Pagesは、世界最大規模のCDN（コンテンツ配信ネットワーク）を持つCloudflareが提供する静的サイトホスティングサービスです。エッジネットワークの強さが最大の武器で、世界中のユーザーに高速に配信できます。

Cloudflare Pagesの強み

• 静的ファイルの配信は無料プランでも帯域無制限（サーバーレス関数の呼び出しは無料プランで1日10万リクエストまで）
• 世界300か所以上のエッジロケーションによる超高速配信
• Cloudflare Workersとの連携でサーバーレス関数も実行可能
• セキュリティ機能（DDoS対策・WAF）が標準搭載

Cloudflare Pagesの注意点

• Next.jsのSSR/ISRは完全対応ではない（静的エクスポートかWorkers経由が必要）
• Cron TriggersやDurable Objectsなど一部の機能はPagesでは制限があり、Workersへの移行が必要になる場合がある

このサイトはCloudflare Pagesを採用

AIテックベースのウェブサイトはAstro（ウェブフレームワーク）で構築し、Cloudflare Pagesにデプロイしています。GitHubのmainブランチにプッシュするたびに自動ビルド・自動デプロイが走り、数分で本番環境に反映されます。静的サイトとCloudflare Pagesの組み合わせは、無料プランでも十分な性能が得られる優れた選択肢です。

どちらを選ぶべきか

• Next.jsを使う・複雑なサーバーサイド処理が必要→ Vercel
• Astro・Nuxt・SvelteKitなどの静的サイト・コスト重視→ Cloudflare Pages

まとめ

VercelはNext.js特化の高機能さが魅力、Cloudflare Pagesは無制限帯域とエッジ配信の速さが魅力です。使用するフレームワークとプロジェクトの要件に合わせて選択しましょう。