Vercel vs Cloudflare Pages：前端部署平台全面比較

前端靜態部署平台這幾年競爭激烈。Vercel 以其極致的開發者體驗和對 Next.js 的深度支援成為很多人的首選，而 Cloudflare Pages 則以龐大的邊緣網路和更親切的定價策略持續搶市。如果你正在評估要把下一個專案部署到哪裡，這篇文章應該能幫助你做出決定。

基本架構差異

Vercel 建立在 AWS、GCP 等雲端基礎上，提供 Serverless Functions（基於 Node.js / Edge Runtime），並透過全球 CDN 分發靜態資產。它的核心優勢在於對 Next.js 框架的一等支援（畢竟是同一家公司開發的）。

Cloudflare Pages 則完全建立在 Cloudflare 自有的全球網路上——超過 300 個資料中心，覆蓋全球。Pages Functions 基於 Cloudflare Workers（V8 Isolates），啟動時間幾乎為零，不存在傳統 Serverless 的冷啟動問題。

效能比較

靜態資產

兩者都使用全球 CDN 分發，靜態資產的速度差異不大，主要取決於使用者所在地與最近節點的距離。Cloudflare 的網路節點數量更多，在某些地區（特別是亞洲、非洲）有優勢。

Serverless Functions / Edge Functions

這是兩者最大的差異：

// Vercel Serverless Function（傳統 Node.js 環境）
// api/hello.js
export default function handler(req, res) {
  res.json({ message: 'Hello from Vercel!' });
}

// Vercel Edge Function（Edge Runtime）
// api/hello.js
export const config = { runtime: 'edge' };
export default function handler(req) {
  return new Response(JSON.stringify({ message: 'Hello from Edge!' }), {
    headers: { 'Content-Type': 'application/json' }
  });
}

// Cloudflare Pages Function
// functions/api/hello.js
export async function onRequest(context) {
  return new Response(JSON.stringify({ message: 'Hello from Cloudflare!' }), {
    headers: { 'Content-Type': 'application/json' }
  });
}

冷啟動：Vercel 傳統 Serverless Functions 有冷啟動問題（可能幾百毫秒），Edge Functions 和 Cloudflare Workers 因為基於 V8 Isolates，幾乎沒有冷啟動。

定價比較

Vercel

方案	月費	Serverless 執行	帶寬
Hobby（個人免費）	$0	100GB 時間	100GB
Pro	$20/人	1000GB 時間	1TB
Enterprise	洽談	無限	無限

注意：Vercel 的免費方案不允許商業用途，這是很多人忽略的限制。

Cloudflare Pages

方案	月費	Workers 請求	帶寬
Free	$0	100,000 次/日	無限
Pro	$20/月（整個帳號）	10M 次/月	無限
Business	$200/月	100M 次/月	無限

Cloudflare Pages 的免費方案沒有商業用途限制，且帶寬完全免費，這對流量較大的網站是很大的優勢。

框架支援

Vercel

對 Next.js 的支援無庸置疑是最好的，包括：

• Server Components
• Streaming
• ISR（Incremental Static Regeneration）
• Image Optimization
• Edge Middleware

其他框架（Nuxt、SvelteKit、Remix、Astro）也都支援，但有些進階功能需要依賴 Vercel 特有的基礎設施。

Cloudflare Pages

透過框架整合，支援大部分主流框架：

# wrangler.toml 或 pages 設定
[build]
command = "npm run build"
destination = ".output/public"  # Nuxt
# destination = "dist"          # Vite / Vue
# destination = ".next"         # Next.js（需要 @cloudflare/next-on-pages）

Next.js 在 Cloudflare Pages 上需要用 @cloudflare/next-on-pages adapter，並非所有 Next.js 功能都支援（特別是依賴 Node.js API 的部分）。Nuxt、SvelteKit、Astro 的支援則相當完整。

開發體驗

Vercel

# 安裝 CLI
npm i -g vercel

# 部署
vercel deploy

# 本地開發（模擬 Serverless Functions）
vercel dev

Vercel 的 Dashboard 介面非常直覺，每個 PR 自動建立 Preview Deployment，方便 code review 時預覽效果。

Cloudflare Pages

# 安裝 wrangler
npm i -g wrangler

# 本地開發（模擬 Workers 環境）
wrangler pages dev ./dist

# 部署
wrangler pages deploy ./dist

Cloudflare 的本地開發工具 Wrangler 也越來越成熟，但整體開發體驗略遜於 Vercel。不過 Cloudflare 近年來大力投資開發者工具，差距在縮小。

Cloudflare 的生態系優勢

選擇 Cloudflare Pages 的一個重要原因是可以與 Cloudflare 的整個生態系整合：

// 在 Pages Function 中使用 KV、R2、D1
export async function onRequest(context) {
  const { env, request } = context;

  // KV 鍵值儲存
  const value = await env.MY_KV.get('key');

  // R2 物件儲存（相容 S3）
  const object = await env.MY_BUCKET.get('image.jpg');

  // D1 SQLite 資料庫
  const result = await env.MY_DB.prepare(
    'SELECT * FROM users WHERE id = ?'
  ).bind(1).first();

  return new Response(JSON.stringify(result));
}

這種整合非常方便，不需要引入外部服務就能實現完整的應用功能。

如何選擇？

選擇 Vercel 如果：

• 你的主要框架是 Next.js
• 重視開箱即用的開發體驗
• 需要 ISR 等 Next.js 特有功能
• 有預算且商業用途

選擇 Cloudflare Pages 如果：

• 使用 Nuxt、SvelteKit、Astro 或純靜態網站
• 流量大、重視帶寬成本
• 想善用 Cloudflare 生態（KV、R2、D1、Workers AI）
• 需要在全球各地都有低延遲的邊緣運算
• 個人專案或小型商業專案，希望免費方案更寬鬆

總結

兩個平台都相當優秀，主要差異在定位和生態系。如果你是 Next.js 用戶，Vercel 仍是最順暢的選擇。如果你追求更低的成本、更廣的全球覆蓋，或想要整合 Cloudflare 的邊緣服務，Cloudflare Pages 是個非常值得認真考慮的選項。