Advanced Caching Strategy: Edge Side Includes (ESI) trong WordPress

ESI là gì?

ESI (Edge Side Includes) là một công nghệ cho phép bạn chèn các đoạn HTML động vào trong trang đã được cache. Toàn bộ trang có thể được cache lâu (ví dụ 1 giờ), nhưng block nhỏ (như giỏ hàng) chỉ cache vài giây hoặc bypass cache hoàn toàn. Nhờ vậy, bạn vừa giữ tốc độ tải cao, vừa đảm bảo thông tin động luôn cập nhật.

Ví dụ thực tế trong WordPress

• WooCommerce giỏ hàng mini: toàn bộ trang sản phẩm có thể cache, chỉ riêng icon giỏ hàng hiển thị số lượng sản phẩm được render động.
• Thanh user info: trang blog có thể cache toàn bộ, nhưng phần header hiển thị avatar + tên user đăng nhập phải động.
• Thông báo flash: banner thông báo cá nhân hóa dựa trên session.

Nguyên lý hoạt động

1. Trang HTML được render với các tag ESI đặc biệt, ví dụ <esi:include src="/esi/cart" />.
2. Proxy cache (Varnish, Fastly, Cloudflare Enterprise Workers) nhận trang, giữ nguyên các tag ESI.
3. Khi trả về cho người dùng, proxy sẽ render block ESI bằng cách gọi endpoint riêng.

Triển khai ESI với Varnish và WordPress

Ví dụ: bạn muốn giỏ hàng WooCommerce luôn động, nhưng các trang khác cache 30 phút.

// functions.php
// Tạo endpoint riêng cho ESI block
add_action('rest_api_init', function() {
  register_rest_route('esi/v1', '/cart', [
    'methods' => 'GET',
    'callback' => function() {
      ob_start();
      woocommerce_mini_cart();
      return ob_get_clean();
    },
    'permission_callback' => '__return_true'
  ]);
});

Trong template header, chèn thẻ ESI thay cho mini-cart trực tiếp:

<esi:include src="/wp-json/esi/v1/cart" />

Cấu hình Varnish VCL:

sub vcl_backend_response {
  if (bereq.url ~ "esi") {
    set beresp.do_esi = true;
  }
}

Triển khai ESI với Cloudflare Workers (Enterprise)

Cloudflare Free/Pro không hỗ trợ ESI gốc, nhưng bạn có thể dùng Workers để giả lập. Worker fetch trang gốc, parse các tag ESI, sau đó fetch block động từ API rồi thay thế trước khi trả về. Ví dụ:

async function handleRequest(request) {
  let response = await fetch(request);
  let text = await response.text();
  const esiRegex = /<esi:include src="(.*?)" \/\>/g;
  let match;
  while ((match = esiRegex.exec(text)) !== null) {
    const esiUrl = match[1];
    const esiResp = await fetch(new URL(esiUrl, request.url));
    const esiHtml = await esiResp.text();
    text = text.replace(match[0], esiHtml);
  }
  return new Response(text, response);
}

Ưu và nhược điểm

• Ưu điểm: tăng tỉ lệ cache hit, giảm TTFB, phù hợp site lớn có nhiều block động.
• Nhược điểm: phức tạp khi setup (cần Varnish/Fastly/Cloudflare Enterprise), khó debug khi block không render.

Khi nào nên dùng ESI trong WordPress?

• Khi bạn có lượng traffic rất lớn, chi phí miss cache cao.
• Khi website có nhiều block động nhưng phần còn lại tĩnh.
• Khi bạn đã triển khai cache cơ bản (full page, object cache) mà vẫn còn bottleneck.

Kết luận

ESI không dành cho mọi site WordPress nhỏ, nhưng với những website lớn hoặc thương mại điện tử, đây là chiến lược cache nâng cao cực kỳ hiệu quả. Bạn có thể kết hợp ESI với Redis Object Cache và CDN để đạt hiệu năng tối đa. Nếu chỉ dừng ở cache toàn trang, bạn có thể đang bỏ lỡ cơ hội giảm tải server đáng kể.