Vấn đề

Bạn vừa build xong một Vue 3 SPA hoặc Next.js app và cần deploy. Những câu hỏi thực tế:

• Bandwidth free tier có đủ không? (Vercel: 100GB/tháng, Netlify: 100GB/tháng - Pages: unlimited)
• Khi traffic tăng đột biến có bị overcharge không?
• Cold start của serverless functions có ảnh hưởng UX không?
• Có support framework mình đang dùng không?

---

So sánh tổng quan: Pages vs Vercel vs Netlify (2026)

Tiêu chí	Cloudflare Pages	Vercel	Netlify
Bandwidth (free)	Unlimited	100GB/tháng	100GB/tháng
Số sites (free)	Unlimited	Unlimited	Unlimited
Builds/tháng (free)	500	6,000	300
Serverless functions	Workers (edge)	Edge + Serverless	Serverless
Cold start	< 1ms (Workers)	~50ms (Edge)	~200ms
CDN locations	330+	~70	~70
Custom domains	Unlimited	Unlimited	Unlimited
Preview deployments	✓	✓	✓
Next.js support	Good	Best	Good
Nuxt/Vue	✓	✓	✓
Astro, SvelteKit	✓	✓	✓
Analytics	Basic	✓	✓
Giá Pro	$20/tháng	$20/user/tháng	$19/tháng

Khuyến nghị 2026:

• Next.js heavy → Vercel (ecosystem, ISR, React Server Components optimization)
• High traffic, static/SPA → Cloudflare Pages (unlimited bandwidth, 330+ edge locations)
• Form handling, identity management → Netlify (mature plugin ecosystem)
• Full-stack với Workers/D1/R2 → Cloudflare Pages (native integration)

---

Deploy Vue 3 / Nuxt lên Cloudflare Pages

Bước 1: Connect Git repository

Vào dash.cloudflare.com → Workers & Pages → Create → Pages → Connect to Git.

Authorize GitHub/GitLab, chọn repo.

Bước 2: Cấu hình build

Với Vue 3 (Vite):

Framework preset: Vue
Build command: npm run build
Build output directory: dist

Với Nuxt 3:

Framework preset: Nuxt.js
Build command: npx nuxi build
Build output directory: .output/public

Với Next.js:

Framework preset: Next.js
Build command: npx next build
Build output directory: .next

Cloudflare Pages tự detect framework từ package.json và suggest config phù hợp.

Bước 3: Environment variables

Thêm env vars trong Settings → Environment Variables:

VITE_API_URL = https://api.yourdomain.com
NODE_VERSION = 20

Phân biệt Production và Preview environments - dùng staging API cho preview deploy.

Bước 4: Custom domain

Vào Custom Domains → Set up a custom domain, nhập app.yourdomain.com. Cloudflare tự tạo CNAME record nếu domain đang quản lý trên Cloudflare DNS.

---

Pages Functions: serverless ở edge (không phải Lambda)

Pages Functions chạy trên Cloudflare Workers runtime - không có cold start, deploy ở edge.

Tạo file trong thư mục functions/:

// functions/api/hello.ts
export const onRequest: PagesFunction = async (context) => {
  const { request, env, params } = context;
  
  return Response.json({
    message: "Hello from Pages Function!",
    url: request.url,
    timestamp: new Date().toISOString(),
  });
};

URL mapping: functions/api/hello.ts → /api/hello

Dynamic routes:

// functions/api/products/[id].ts
export const onRequest: PagesFunction<Env> = async ({ params, env }) => {
  const product = await env.DB.prepare(
    "SELECT * FROM products WHERE id = ?"
  ).bind(params.id).first();
  
  if (!product) return new Response("Not found", { status: 404 });
  return Response.json(product);
};

Tích hợp D1 database và R2:

# wrangler.toml (hoặc config trong dashboard)
[[d1_databases]]
binding = "DB"
database_name = "my-app-db"
database_id = "xxx"

[[r2_buckets]]
binding = "ASSETS"
bucket_name = "my-app-assets"

---

Preview deployments: test trước khi merge

Mỗi Pull Request tự động tạo một preview URL:

https://abc123.my-app.pages.dev

Dùng để:

• Review UI thay đổi trực quan trước khi merge
• Share link với client để approve
• Test trên nhiều device/browser thực tế
• QA automation chạy trên preview URL

Preview environments dùng env vars riêng (staging DB, staging API) - không ảnh hưởng production.

---

Performance thực tế: Pages vs Vercel vs Netlify

TTFB benchmark (static assets, global):

Location	Cloudflare Pages	Vercel	Netlify
Hà Nội, VN	~15ms	~45ms	~50ms
TP.HCM, VN	~12ms	~40ms	~48ms
Singapore	~8ms	~25ms	~30ms
US East	~20ms	~15ms	~18ms

Cloudflare thắng ở châu Á nhờ có nhiều PoP hơn (HAN, SGN, SIN so với chỉ SIN của Vercel/Netlify).

---

Khi nào nên chọn Cloudflare Pages

Chọn Pages khi:

• Traffic lớn, lo ngại bandwidth overcharge
• Cần edge latency tốt cho user châu Á
• Dùng stack: Workers + D1 + R2 (Pages là frontend layer tự nhiên)
• Static site, SPA (Vue, React không dùng RSC), Astro, SvelteKit
• Cần unlimited sites trên cùng account

Chọn Vercel khi:

• Project Next.js nặng, cần ISR, React Server Components tối ưu nhất
• Team đã đầu tư vào Vercel ecosystem (Analytics, Speed Insights)
• Cần platform support chuyên sâu cho Next.js

Chọn Netlify khi:

• Cần form submission built-in (không muốn tự build backend)
• Dùng Netlify Identity
• Plugin ecosystem phong phú cho static site generators (Hugo, Jekyll, 11ty)

---

Kết

Cloudflare Pages năm 2026 là lựa chọn mặc định của chúng tôi cho phần lớn frontend project: unlimited bandwidth loại bỏ một mối lo về cost, 330+ PoP mang lại latency tốt đặc biệt với user châu Á, và native integration với Workers/D1/R2 cho phép build full-stack app hoàn chỉnh trên Cloudflare platform.

Đây là bài cuối trong series Cloudflare DevOps của BKGlobal Tech Team. Toàn bộ series cover từ DNS setup, Redirect Rules, Tunnel, Zero Trust, WAF, Cache, Workers, R2, đến Pages - đủ để bạn khai thác toàn bộ sức mạnh của Cloudflare platform.

---

Tham khảo

• Cloudflare Pages - Official docs
• Vercel vs Netlify vs Cloudflare Pages 2026
• Cloudflare vs Vercel vs Netlify: Edge Performance 2026
• Cloudflare Pages 2026 Guide

---

BKGlobal Tech Team