Vercel edge cache — Next.js + WordPress headless

Vercel Edge Cache là lớp cache CDN tích hợp cho Next.js và các framework hiện đại — cache tại 70+ vùng, hỗ trợ ISR và stale-while-revalidate. Bài hướng dẫn 5 bước thiết lập edge cache Vercel cho headless WordPress 2026.

Vercel Edge Cache là gì

Vercel host cả ứng dụng lẫn cache tại edge 70+ vùng, không cần quản lý máy chủ riêng. Khác Cloudflare là CDN reverse proxy thuần, Vercel tích hợp build và edge deployment trong một nền tảng.

Mỗi lần triển khai qua git push, Vercel tự build và đẩy lên edge. Không cần cấu hình Nginx hay quản lý hạ tầng.

3 lớp cache Vercel

• Tài nguyên tĩnh: CSS/JS/ảnh từ thời điểm build — cache vĩnh viễn, không thể thay đổi (immutable).
• ISR (Incremental Static Regeneration): trang HTML cache tại edge với TTL, tự làm mới theo chu kỳ. Theo mẫu stale-while-revalidate.
• Edge Function: chạy mã JavaScript tại edge (auth, A/B test, redirect) — thời gian phản hồi cực thấp.

Vercel phù hợp với ai

Vercel phù hợp nhất khi frontend dùng Next.js hoặc framework JavaScript hiện đại. Với WordPress thuần, Cloudflare CDN là lựa chọn phù hợp hơn.

Kiến trúc headless phổ biến nhất: WordPress làm CMS API (REST/GraphQL) trên VPS, Next.js frontend triển khai Vercel — gọi API qua ISR.

Bước 1 — Triển khai ứng dụng lên Vercel

Thiết lập triển khai theo git — kết nối GitHub, Vercel tự build và cập nhật khi có commit mới.

Các bước triển khai lần đầu

1. Đẩy mã Next.js lên GitHub.
2. Đăng ký vercel.com bằng tài khoản GitHub.
3. Click “New Project” → import repository.
4. Vercel tự nhận diện framework và cấu hình build.
5. Click “Deploy” → chờ 1-3 phút build xong.
6. Ứng dụng live tại ten-app.vercel.app.
7. Thêm tên miền tùy chỉnh trong Settings → Domains.

Cấu trúc build và cache tự động

Sau mỗi lần build, Vercel phân loại output tự động: tài nguyên tĩnh nhận header immutable, trang HTML nhận TTL theo cấu hình ISR.

Không cần cấu hình CDN thủ công — Vercel tự phân phối lên edge network sau mỗi lần deploy.

Bước 2 — Cấu hình Cache-Control header

Vercel tôn trọng Cache-Control header từ ứng dụng. Set header đúng để kiểm soát TTL tại edge và trình duyệt.

Next.js API Route — set header thủ công

// pages/api/products.js
export default async function handler(req, res) {
  const data = await fetchProducts();
  res.setHeader(
    'Cache-Control',
    'public, s-maxage=300, stale-while-revalidate=3600'
  );
  res.json(data);
}

// s-maxage=300: edge cache 5 phút
// stale-while-revalidate=3600: phục vụ bản cũ 1 giờ + làm mới nền

Next.js App Router — ISR qua revalidate

// app/products/page.js
export const revalidate = 300;  // ISR 5 phút

export default async function Products() {
  const data = await fetch('https://api.cms.com/products', {
    next: { revalidate: 300 }
  });
  // Trang cache 5 phút tại edge, làm mới nền sau khi hết hạn
}

Cấu hình header toàn cục qua vercel.json

// vercel.json
{
  "headers": [
    {
      "source": "/(.*).css",
      "headers": [
        { "key": "Cache-Control", "value": "public, max-age=31536000, immutable" }
      ]
    },
    {
      "source": "/api/(.*)",
      "headers": [
        { "key": "Cache-Control", "value": "public, s-maxage=60, stale-while-revalidate=300" }
      ]
    }
  ]
}

Bước 3 — ISR (Incremental Static Regeneration)

ISR là mẫu cache mạnh nhất của Vercel — cache trang HTML tại edge với TTL, làm mới nền khi hết hạn. Người dùng luôn nhận phản hồi nhanh (từ cache), dữ liệu mới sau TTL.

ISR cho trang sản phẩm

// app/product/[slug]/page.js
export const revalidate = 60;  // 1 phút

export async function generateStaticParams() {
  const slugs = await fetchAllProductSlugs();
  return slugs.map(slug => ({ slug }));
}

export default async function ProductPage({ params }) {
  const product = await fetchProduct(params.slug, {
    next: { revalidate: 60 }
  });

  return <ProductDetail data={product} />;
}

On-demand revalidation — làm mới ngay khi WordPress cập nhật

// pages/api/revalidate.js
export default async function handler(req, res) {
  // Webhook từ WordPress khi lưu sản phẩm
  if (req.headers['x-secret'] !== process.env.REVAL_SECRET) {
    return res.status(401).end();
  }

  const { slug } = req.body;
  await res.revalidate(`/product/${slug}`);
  res.json({ revalidated: true });
}

// WordPress gọi endpoint này qua hook save_post
// Vercel xóa cache slug cụ thể, lấy dữ liệu mới từ yêu cầu tiếp theo

Chọn TTL phù hợp

TTL quá ngắn (dưới 60 giây) làm tăng tải lên nguồn dữ liệu và giảm hiệu quả cache. TTL quá dài (hơn 1 giờ) khiến nội dung cập nhật lâu đến tay người dùng.

Với shop WooCommerce headless: trang sản phẩm 60-300 giây, trang danh mục 300 giây, trang chủ 60 giây. Kết hợp on-demand revalidation khi có cập nhật quan trọng.

Bước 3-4 — ISR và Edge Function

Edge Function chạy mã JavaScript tại edge node, không có thời gian khởi động (cold start), thời gian phản hồi rất thấp. Phù hợp cho: kiểm tra auth, A/B test, redirect, phân vùng địa lý.

Middleware redirect theo địa lý

// middleware.js (thư mục gốc)
import { NextResponse } from 'next/server';

export const config = {
  matcher: '/((?!api|_next|favicon).*)',
};

export default function middleware(req) {
  const country = req.geo?.country || 'VN';

  // Người dùng VN về /vn, các nước khác về /en
  if (country === 'VN' && !req.url.includes('/vn')) {
    return NextResponse.redirect(new URL('/vn' + req.nextUrl.pathname, req.url));
  }
  if (country !== 'VN' && !req.url.includes('/en')) {
    return NextResponse.redirect(new URL('/en' + req.nextUrl.pathname, req.url));
  }
}

Giới hạn của Edge Function

Edge Function không hỗ trợ TCP/Postgres trực tiếp — không kết nối thẳng đến MySQL hay Postgres. Dùng HTTP API: Supabase REST, PlanetScale serverless driver, hoặc Upstash Redis HTTP.

Giới hạn runtime: 1-30 giây tùy plan. Logic phức tạp nên đẩy về API route thông thường thay vì Edge Function.

Bước 5 — So sánh chi phí và hiệu năng

Vercel edge cache kết hợp Edge Function giúp thời gian phản hồi toàn cầu rất thấp. So sánh với hosting WordPress truyền thống:

Thời gian phản hồi (TTFB) theo setup

Số liệu tham khảo từ tài liệu chính thức Vercel và các bài đo hiệu năng độc lập. Kết quả thực tế phụ thuộc vào cấu hình ứng dụng và nguồn dữ liệu.

Chi phí theo quy mô

• Hobby (miễn phí): 100GB băng thông/tháng, 1000 phút build. Đủ cho blog cá nhân, danh mục dự án.
• Pro $20/tháng: 1TB băng thông, 1 triệu lần gọi Edge Function. Đủ cho shop nhỏ đến vừa.
• Băng thông vượt: $0,40/GB. Cần tính toán nếu site có traffic cao.
• Edge Function vượt: $0,65/triệu lần gọi.

Checklist setup edge cache Vercel

1. Kết nối GitHub repo, cấu hình build tự động.
2. Set revalidate phù hợp cho từng loại trang.
3. Cấu hình header Cache-Control cho API route.
4. Thiết lập webhook on-demand revalidation từ WordPress.
5. Kiểm tra header x-vercel-cache: HIT cho trang đã cache.
6. Theo dõi tỉ lệ cache hit trong Vercel Analytics.
7. Thêm middleware redirect địa lý nếu cần.
8. Test TTFB từ nhiều vùng địa lý qua WebPageTest.

Vercel hay Cloudflare — chọn cái nào

Vercel và Cloudflare phục vụ hai kịch bản khác nhau. Không cần chọn một — nhiều setup kết hợp cả hai.

Vercel tốt nhất cho Next.js native, ISR trưởng thành, Edge Function mạnh. Cloudflare Pages phù hợp khi cần băng thông miễn phí không giới hạn và ít phụ thuộc nhà cung cấp.

Site Next.js → Vercel. Site Astro/SvelteKit/Hugo tĩnh → Cloudflare Pages.

Bài liên quan

• Cloudflare cấu hình WordPress — CDN và cache toàn diện
• Cache browser headers — Cache-Control và ETag
• Redis cache cho WordPress — giảm tải cơ sở dữ liệu
• TTFB — phân tích thời gian phản hồi
• Core Web Vitals 2026 — tổng quan

Câu hỏi thường gặp

Cần đánh giá toàn bộ hiệu năng kiến trúc headless WordPress + Vercel? Web22 tư vấn audit tối ưu Core Web Vitals cho cả stack WordPress truyền thống lẫn Next.js.