Vercel vs Cloudflare Pages: 2026 成本、性能与开发体验

结论

两者都能从 Git 自动构建、生成预览、绑定域名并通过全球网络分发。真正差异在动态请求、计费项目、框架支持和团队流程。Vercel 更像为 Next.js 产品准备的发布层，预览、图片优化、ISR、日志和分析更顺。Cloudflare Pages 更像边缘平台入口，DNS、CDN、Workers、D1、KV、R2、缓存规则可以放在同一生态中。

成本

Vercel Hobby 免费，Pro 从每月 20 美元加用量开始。官方价格包含 Hobby 100GB 传输、1M Edge Requests、Functions Active CPU 4 小时等；Pro 包含更大的 1TB 传输和请求额度，但超出后按项目计费。需要同时关注 transfer、image transformations、function CPU、invocations、ISR reads 和 writes。

Cloudflare Pages 对静态网站很友好。Free 限制包括每月 500 builds、1 个并发 build、每项目 100 个 custom domains、20,000 files。动态能力通常进入 Pages Functions 或 Workers。Workers 免费层有每日 100,000 requests 和 10ms CPU；付费约为每百万 requests 0.30 美元、每百万 CPU ms 0.02 美元。D1、R2、KV 另看计费。

性能

纯静态资源两者都很快。差别在缓存未命中和边缘逻辑。Cloudflare 适合在边缘处理路由、缓存和数据读取。Vercel 适合 Next.js 应用，把图片、ISR、预览和性能观测整合得更自然。

DX

Vercel 对设计、产品和前端团队更顺手，PR 预览链接和回滚很直观。Cloudflare 更工程化，wrangler、Workers、D1、R2 很强，但复杂 SSR 需要理解 Workers runtime、OpenNext 和 Node API 兼容性。

选择

博客、文档、landing page、公开工具先看 Cloudflare Pages。Next.js SaaS、认证 dashboard、频繁预览评审、图片优化需求强时先看 Vercel。成熟团队也可以拆分: Cloudflare 管 DNS 和静态内容，Vercel 承载核心 Next.js app。

FAQ

哪个更便宜

静态和缓存内容通常 Cloudflare Pages 更便宜。动态请求要看 Workers、D1、R2 使用量。

Next.js 必须用 Vercel 吗

不是。只是 Vercel 对 Next.js 新功能和预览流程的摩擦最低。

哪个更快

静态内容都快。Cloudflare 在边缘规则和缓存控制上强，Vercel 在 Next.js 交付上强。

Vercel 要监控什么

传输、图片转换、函数 CPU、内存、调用、ISR 读写和 build minutes。

Cloudflare 要监控什么

Workers requests、CPU time、D1 rows、R2 operations、KV usage 和 build 数量。

最安全的起点是什么

静态站从 Cloudflare Pages 开始，严肃 Next.js 产品从 Vercel 开始，并设置预算提醒。

Useful internal links: Core Web Vitals guide, Next.js metadata guide, DNS setup guide, Cloudflare Pages hosting guide, Tailwind CSS 4 guide.

Sources: Vercel Pricing, Cloudflare Pages Limits, Cloudflare Workers Pricing.