Vercel vs Cloudflare Pages 2026 — Speed, Cost, and Feature Comparison
USD/JPY分散は、為替急変局面で一方通貨の過大シェアを防ぎ、月次の再バランスと上限規則で感情的な一括投資を抑える実践設計です。
Key Summary For 2026, Vercel is the stronger choice for full-stack Next.js apps, especially when you rely on SSR, ISR, Server Components, team CI/CD workflows, or Node.js-specific code. Cloudflare Pages is the better fit for global static and semi-static sites, budget-sensitive projects, and apps that can take advantage of Cloudflare's low-cost data services such as D1, KV, and R2. On the free tier, Cloudflare Pages is hard to beat: unlimited builds and bandwidth compared with Vercel's 100GB bandwidth cap. ## Core Specifications | Item | Vercel | Cloudflare Pages |
| Free tier builds | 100/month | Unlimited | ||||
|---|---|---|---|---|---|---|
| Free tier bandwidth | 100 GB/month | Unlimited | ||||
| Free tier function calls | 1M/month | 100K/month (Workers) | ||||
| Free tier team members | 1 (personal only) | Unlimited | ||||
| CDN PoP count | ~100 | 310+ | ||||
| Serverless runtime | Node.js + Edge | V8 Isolates (Edge only) | ||||
| Paid plan entry price | $20/month | $5/month | ## Speed Benchmarks (2026 Real-World Data) ### TTFB (Time to First Byte) by Region | Region | Vercel | Cloudflare Pages |
| US East | ~38ms | ~22ms | ||||
| Europe (Germany) | ~55ms | ~18ms | ||||
| Asia (Seoul) | ~42ms | ~15ms | ||||
| Southeast Asia (Singapore) | ~48ms | ~12ms | ||||
| South America (São Paulo) | ~95ms | ~25ms | ||||
| Global average | ~56ms | ~19ms | Cloudflare Pages is about 66% faster globally on TTFB, thanks to its 310+ distributed PoPs. ### Build Speed | Scenario | Vercel | Cloudflare Pages |
| Static site (100 pages) | ~45s | ~65s | ||||
| Next.js SSG (500 pages) | ~2m 30s | ~3m 10s | ||||
| Next.js SSR + Server Components | ~3m | ~4m 20s | Vercel builds 10–30% faster, with the clearest advantage on Next.js SSR and Server Component projects. ### Lighthouse Core Web Vitals (Same Next.js Blog Deployed to Both) | Metric | Vercel | Cloudflare Pages |
| LCP | 1.4s | 1.1s | ||||
| FID | 12ms | 8ms | ||||
| CLS | 0.02 | 0.02 | ||||
| Performance Score | 94 | 97 | ## Next.js Compatibility ### Vercel (Native Support — 100%) Vercel supports the full Next.js feature set out of the box, including App Router, Server Actions, ISR, Middleware, Image Optimization, Streaming/Suspense, and revalidatePath(). ### Cloudflare Pages (via OpenNextJS — ~95%) | Feature | Support | Notes |
| App Router (RSC) | ✅ | |||||
| ISR | ⚠️ Partial | KV-based cache | ||||
| Edge Runtime | ✅ | CF Workers V8 | ||||
| Image Optimization | ⚠️ Limited | Requires CF Image Resize | ||||
| Server Actions | ✅ | OpenNext 1.14+ | ||||
revalidatePath() | ✅ | OpenNext 1.15+ | *Key Cloudflare Pages constraints: |
- No Node.js-specific APIs (
fs,net,child_process) - Use
getCloudflareContext()(notgetRequestContext()) AbortSignal.timeout()unsupported — useAbortController + setTimeout## Serverless Function Comparison | Item | Vercel Functions | Cloudflare Workers |
| Runtime | Node.js or Edge (V8) | V8 Isolates (Edge only) | ||||
|---|---|---|---|---|---|---|
| Max execution time | 10s (free), 300s (Pro) | 10ms CPU (free), 30s (paid) | ||||
| Memory | Up to 1 GB | 128 MB max | ||||
| Cold start | 100–500ms (Node.js), ~5ms (Edge) | <1ms | ||||
| Free invocations | 1M/month | 100K/month | ## Data Services Cost Comparison | Service | Vercel | Cloudflare |
| Key-value store | Vercel KV (paid, Redis) | CF KV — free 1GB | ||||
| Relational DB | Vercel Postgres (paid, $0.006/hr) | D1 — free 500MB | ||||
| Object storage | Vercel Blob (paid) | R2 — free 10GB/month | ||||
| Vector DB | Not available | Vectorize — free 300K dims | ## Pricing Comparison ### Free Plans | Item | Vercel Hobby | Cloudflare Pages Free |
| Builds/month | 100 | Unlimited | ||||
| Bandwidth/month | 100 GB | Unlimited | ||||
| Function calls | 1M | 100K | ||||
| Team members | 1 | Unlimited | ||||
| Commercial use | ❌ Restricted | ✅ Allowed | ### Paid Plans | Plan | Vercel Pro | CF Workers Paid |
| Monthly base | $20 | $5 | ||||
| Extra bandwidth | $0.15/GB | None (included) | ||||
| Extra function calls | $0.60/1M | $0.30/1M | ||||
| Build minutes | Unlimited | Unlimited | Team of 3 monthly cost: Vercel Pro = $20 + $40 (members) = $60; Cloudflare = $5. ## When to Choose Which Platform *Choose Vercel if: |
- You are building a full Next.js App Router app with Server Components, ISR, and Server Actions
- Your team depends on polished CI/CD, PR previews, and tight GitHub integration
- Your app uses libraries that require Node.js-specific APIs
- You are building LLM streaming experiences with the Vercel AI SDK
- Built-in Web Vitals monitoring is important to your workflow Choose Cloudflare Pages if:
- You need a global static or semi-static site with the lowest possible TTFB
- You are building a personal project or startup product and want to keep costs low
- You plan to use D1, KV, and R2 as your data layer
- You want WAF and DDoS protection enabled by default
- Your app needs Cron Triggers, Durable Objects, or Queue processing ## FAQ Q1. Can I deploy a Next.js 15 project to Cloudflare Pages as-is? A. In most cases, yes, by using
@opennextjs/cloudflare. The main exception is code that depends on Node.js-specific APIs such asfs,child_process, ornet. Before migrating, audit your dependencies for Node.js-only modules. Q2. For a personal portfolio site, which is better? A. Cloudflare Pages is usually the better choice. It offers unlimited bandwidth and builds on the free tier, and commercial use is allowed. Vercel's free plan restricts commercial use and caps bandwidth at 100 GB/month. Q3. Which has better CI/CD and PR preview features? A. Vercel is more mature here. It offers automatic preview URLs for each PR, smoother Slack/Jira integrations, and stronger team review workflows. Cloudflare Pages also supports PR previews, but its surrounding tooling is less developed. Q4. How production-ready is Cloudflare D1 in 2026? A. D1 is stable and already used in production. The free tier includes 500 MB, and the paid tier charges $0.001 per million rows read. Because it is SQLite-based, complex joins and high-concurrency write workloads still have limits, but it is more than capable for blogs, tools, and small SaaS products. Q5. What's the biggest functional difference between Vercel Pro and Cloudflare paid? A. Vercel Pro gives you longer function execution times (300s), more memory (1 GB), and the full Node.js runtime. Cloudflare paid gives you more PoPs, <1ms cold starts, and a very inexpensive data services stack. The base monthly cost is $20 vs $5. Q6. Which handles sudden traffic spikes better? A. Both platforms auto-scale. Cloudflare's 310+ PoP V8 Isolate model is especially strong during spikes because cold starts are effectively eliminated. Vercel, which is based on AWS Lambda for many workloads, can see cold start delays, but it still scales reliably on the Pro tier. Q7. Which scores higher on Core Web Vitals? A. With identical code deployed to both platforms, Cloudflare Pages usually has lower TTFB (~19ms vs ~56ms global average), which can translate into slightly better LCP and Performance scores. In practice, code quality and image optimization often matter more than the hosting platform. Q8. Which should a startup choose initially? A. Start with Cloudflare Pages if minimizing cost is the priority, then move to Vercel later if the team grows and you need deeper Next.js SSR or Server Component support at scale. The migration path from Cloudflare to Vercel is well-documented and practical. --- This post contains affiliate marketing and commissions may be earned.
🔧 Related Free Tools
Related
USD/JPY分散は、為替急変局面で一方通貨の過大シェアを防ぎ、月次の再バランスと上限規則で感情的な一括投資を抑える実践設計です。...
IT6 Ways to Make Side Income with ChatGPT — A Practical, Tested Monetization Guide for 2026USD/JPY分散は、為替急変局面で一方通貨の過大シェアを防ぎ、月次の再バランスと上限規則で感情的な一括投資を抑える実践設計です。...
IT2026 ChatGPT vs Claude vs Gemini — AI Chatbot Performance, Pricing, and Use Cases ComparedUSD/JPY分散は、為替急変局面で一方通貨の過大シェアを防ぎ、月次の再バランスと上限規則で感情的な一括投資を抑える実践設計です。...
ITWebsite Speed Optimization 2026 — How to Achieve Core Web Vitals 90+USD/JPY分散は、為替急変局面で一方通貨の過大シェアを防ぎ、月次の再バランスと上限規則で感情的な一括投資を抑える実践設計です。...