FEMastery
10Level 10 · Modern Frontend System Architecture

Kiến trúc hệ thống Frontend hiện đại

Ở tầng hệ thống không có bữa trưa miễn phí — mỗi lựa chọn đều phải trả giá, và việc của bạn là nêu rõ mình đánh đổi cái gì.

Edge renderingMicro-frontend orchestrationModule federationWebAssembly integrationIndexedDB scaling strategyServer Components architectureOffline-first designConflict resolution modelsDistributed UI consistencyFrontend system design trade-offs
0%
8 phút đọcRender tại biên

Edge rendering

Chạy SSR trên node CDN gần người dùng để hạ TTFB toàn cầu — đổi lại runtime bị giới hạn.

Kiến trúc Edge Runtime vs. Node.js Runtime

Edge rendering đưa việc Server-Side Rendering (SSR) ra các node CDN phân tán toàn cầu (ví dụ: Cloudflare Workers, Vercel Edge Runtime) thay vì chạy tại một server origin duy nhất. Nhờ việc phân phối xử lý đến vị trí gần người dùng nhất có thể, thời gian phản hồi gói tin đầu tiên (TTFB - Time to First Byte) được kéo giảm tối đa, giúp tối ưu hóa SEO và trải nghiệm cảm nhận của người dùng toàn cầu.

Tuy nhiên, Edge Runtime hoạt động dựa trên các môi trường cô lập siêu nhỏ (V8 Isolates) chứ không chạy toàn bộ môi trường Node.js. Điều này có nghĩa là bạn sẽ không có quyền truy cập vào các API hệ thống tập tin (như thư viện fs hay path), không thể khởi chạy các tiến trình con (child_process), kích thước của mã nguồn biên dịch (bundle size) bị giới hạn nghiêm ngặt, và thời gian thực thi của mỗi request (execution CPU time limit) cũng bị giới hạn dưới mức mili-giây.

Chiến lược xử lý dữ liệu và Caching ở biên

Thách thức kỹ thuật lớn nhất khi chuyển sang Edge rendering là giải quyết vấn đề truy cập dữ liệu 'lạnh' (cold database access). Nếu cơ sở dữ liệu chính của bạn nằm tại một khu vực địa lý đơn lẻ (chẳng hạn như bang Virginia, Mỹ), một Edge node đặt tại Tokyo, Nhật Bản sẽ phải thực hiện một hành trình xuyên đại dương dài để truy vấn dữ liệu. Hành trình này sẽ phá hủy hoàn toàn lợi thế về thời gian phản hồi nhanh của Edge.

Để khắc phục điểm yếu này, các kiến trúc sư thường áp dụng ba chiến lược bổ trợ: (1) Sử dụng các cơ sở dữ liệu phân tán hoặc hỗ trợ replication toàn cầu (như Cloudflare D1, Turso, Supabase pgEdge); (2) Sử dụng các giải pháp cache phân tán có độ trễ cực thấp tại biên (như Upstash Redis, Cloudflare KV); (3) Tận dụng tối đa tiêu chuẩn HTTP caching thông qua header Cache-Control kết hợp với chỉ thị stale-while-revalidate để phục vụ HTML cũ tức thì và cập nhật ngầm phiên bản mới.

ts
// app/api/geo/route.ts
export const runtime = "edge"; // Kích hoạt Edge Runtime cho route này

export async function GET(request: Request) {
  // Trình duyệt tự động chèn các thông tin địa lý của client vào request headers tại tầng CDN
  const country = request.headers.get("x-vercel-ip-country") ?? "VN";
  const city = request.headers.get("x-vercel-ip-city") ?? "Hồ Chí Minh";

  // Lấy dữ liệu cá nhân hóa dựa trên địa lý được tối ưu hóa tốc độ
  const welcomeMessage = country === "VN"
    ? `Chào mừng bạn đến từ ${city}! Chúng tôi có ưu đãi miễn phí vận chuyển dành riêng cho bạn.`
    : `Welcome from ${city}, ${country}! Enjoy our global premium features.`;

  return new Response(JSON.stringify({ country, city, message: welcomeMessage }), {
    status: 200,
    headers: {
      "Content-Type": "application/json",
      // Cho phép CDN cache trong 60 giây và trả về bản cache cũ trong khi update ngầm thêm 30 giây
      "Cache-Control": "public, s-maxage=60, stale-while-revalidate=30",
    },
  });
}
Khai báo Route chạy trên Edge Runtime và xử lý cá nhân hóa theo địa lý

NÊNSử dụng Edge Rendering cho các trang cần cá nhân hóa tức thì theo ngữ cảnh (như A/B Testing, định tuyến địa lý Geo-IP, kiểm tra quyền truy cập Auth Gate) kết hợp với các DB phân tán toàn cầu.

CẢNH BÁOKhông thực hiện các tác vụ tính toán nặng (CPU-intensive), parse file dung lượng lớn hoặc sử dụng các thư viện npm phụ thuộc sâu vào Node.js API tại Edge.

VÌ SAOĐánh đổi kiến trúc: Tối ưu hóa TTFB toàn cầu và nâng cao chỉ số SEO vượt trội ↔ Chấp nhận các ràng buộc khắt khe của môi trường runtime và tăng độ phức tạp khi đồng bộ dữ liệu phân tán.