Vercel vs Cloudflare Pages: Frontend Deployment Guide
Choosing between Vercel and Cloudflare Pages trips up a surprising number of builders — both platforms look nearly identical on the surface until you hit a pricing wall or a missing runtime feature at 2 a.m. This guide walks through the real differences in pricing structure, build behaviour, edge runtimes, and developer experience so you can pick the right platform before you're locked in. By the end you'll have a decision framework for Vercel vs Cloudflare Pages frontend deployment that fits your actual traffic and budget.
Why this choice matters more than it used to
Static hosting used to be a commodity. Drop files on a CDN, done. Both Vercel and Cloudflare Pages have since grown into full compute platforms — serverless functions, edge middleware, image optimisation, preview deployments, analytics — and the architectural decisions baked into each platform now affect your entire backend boundary, not just where your HTML lives.
Pick the wrong one and you'll either pay Vercel's bandwidth overages on a viral month, or discover that Cloudflare's Workers runtime doesn't support a Node.js API your library depends on.
How the platforms are fundamentally different
Vercel is built on AWS Lambda under the hood (with a thin proprietary layer). Its edge middleware runs on the V8 isolate network, but serverless functions default to Node.js on Lambda. That means broad npm ecosystem compatibility and familiar runtime behaviour.
Cloudflare Pages runs everything — including "Functions" — on the Workers runtime, which is a strict V8 isolate environment with no Node.js compatibility layer by default (though a compatibility flag exists). The entire global network is Cloudflare's own, which means cold starts are effectively zero and every response originates from one of 300+ PoPs.
That single architectural difference cascades into almost every other tradeoff below.
Head-to-head comparison
| Dimension | Vercel (Pro: $20/seat/mo) | Cloudflare Pages (Free / $5 Workers plan) |
|---|---|---|
| Free tier builds | 6,000 min/mo | Unlimited builds |
| Free tier bandwidth | 100 GB/mo | Unlimited (unmetered) |
| Serverless runtime | Node.js (Lambda) + Edge (V8) | Workers (V8 isolate only) |
| Cold starts | ~200–400 ms (Lambda functions) | ~0 ms (isolate, always warm) |
| npm ecosystem | Full Node.js compatibility | Partial — no native modules |
| Preview deployments | Yes, per branch/PR | Yes, per branch/PR |
| Image optimisation | Built-in (counts toward usage) | Via Cloudflare Images (separate cost) |
| Analytics | Vercel Analytics (paid add-on) | Web Analytics (free, privacy-first) |
| Custom build command | Yes | Yes |
| Monorepo support | First-class (Turborepo integration) | Manual root directory config |
| Overage model | Pay-per-unit above limits | Bandwidth free; Workers invocations priced |
| Vendor lock-in surface | Middleware, OG image API, Firewall | Workers KV, D1, R2 ecosystem |
When Vercel wins
You're shipping a Next.js app. Vercel built Next.js. Server Components, Partial Prerendering, and the App Router's streaming responses are all tested on Vercel first. Running Next.js on Cloudflare Pages requires the @opennextjs/cloudflare adapter, which lags behind Next.js releases and has known gaps with certain middleware patterns.
Your team depends on heavy npm packages. If your serverless functions use libraries that call native addons — image processing, PDF generation, certain database drivers — you need Lambda's Node.js runtime. Workers will reject them.
You want zero-config monorepo deployments. Vercel's Turborepo integration detects workspace packages automatically. Cloudflare Pages requires you to manually set the root directory and duplicate environment variables per project.
Your traffic is predictable and under the free-tier limits. For a small SaaS or portfolio with modest traffic, Vercel's free tier is generous and the DX is hard to beat.
When Cloudflare Pages wins
Bandwidth costs are a real concern. Cloudflare's unmetered bandwidth is not a gimmick — it's a structural advantage because Cloudflare owns its network. A content-heavy site or a viral product launch won't produce a surprise invoice.
You're building a globally distributed app where latency matters. Zero cold-start isolates at 300+ PoPs mean your edge function in Singapore responds as fast as one in Frankfurt. Vercel's Lambda functions still spin up in a regional pool.
You want to grow into Cloudflare's ecosystem. D1 (SQLite at the edge), R2 (S3-compatible object storage with no egress fees), KV, Queues, and Durable Objects all integrate natively. If you're building a product that will eventually need these primitives, starting on Pages makes architectural sense.
You're deploying a non-Next.js framework. SvelteKit, Astro, Remix, and Nuxt all have official Cloudflare adapters that are well-maintained. You're not a second-class citizen the way you might feel on Vercel when you're not using Next.js.
A practical decision checklist
Before committing, run through these questions:
- [ ] Does your project use Next.js App Router features (PPR, Server Components streaming)? → Vercel is safer.
- [ ] Do your serverless functions use Node.js native modules or
child_process? → Vercel required. - [ ] Is your site content-heavy with unpredictable traffic spikes? → Cloudflare Pages.
- [ ] Do you need sub-10 ms global edge response times for every function? → Cloudflare Pages.
- [ ] Are you planning to use Cloudflare D1, R2, or Durable Objects later? → Start on Pages now.
- [ ] Does your team already pay for Vercel Pro for another project? → Consolidate there.
- [ ] Is your framework anything other than Next.js? → Cloudflare Pages has equal or better adapter support.
- [ ] Are you on the free tier and expect to stay under 100 GB bandwidth? → Either works; choose on DX preference.
The hidden cost conversation
Vercel's pricing model is per-seat for Pro, then per-unit for overages (bandwidth, function invocations, image optimisations, log drains). A small team can stay on free comfortably, but a single viral week can produce a bill that surprises founders who didn't read the fine print.
Cloudflare Pages is free for static assets and bandwidth. The cost surface only appears when you use Workers beyond the free invocation limit (100k requests/day on the free plan), or when you add paid primitives like D1 or Images. For most frontend-heavy projects, the monthly cost is $0 or $5 (Workers Paid plan to remove the daily invocation cap).
Neither platform is universally cheaper — it depends on your invocation count vs. bandwidth ratio.
Key takeaways
- Vercel is the path of least resistance for Next.js projects and teams that need full Node.js compatibility in serverless functions.
- Cloudflare Pages wins on bandwidth economics, global cold-start performance, and ecosystem cohesion if you're building toward Workers/D1/R2.
- Framework choice is often the deciding factor: Next.js App Router → Vercel; everything else → Cloudflare Pages is a peer option.
- The hidden cost cliff on Vercel is bandwidth and image optimisation overages; on Cloudflare it's Workers invocation volume above the free daily limit.
- Vendor lock-in exists on both sides — Vercel's middleware API and Cloudflare's KV/D1 bindings are not portable.
- Evaluate your expected traffic shape, not just your current traffic, before committing.
If you're still weighing these platforms against other hosting options — Railway, Render, or a plain VPS — the /compare tool on CraftMyStack lets you put them side by side on the dimensions that matter for your project. You can also use /recommend to answer a few questions about your stack and get a shortlist that accounts for your framework, team size, and budget.
For teams that want AI assistance while planning architecture, pairing CraftMyStack with PromptCuelab lets you craft precise prompts to interrogate deployment tradeoffs with your AI assistant — useful when the decision tree gets complex.