edge-rendering

边缘渲染

属于 Agent Skills™，由 googleadsagent.ai™ 提供

描述

边缘渲染可在网络边缘生成并提供动态页面，避免因内容随城市、服务或用户细分群体而变化而产生的源站往返请求。这项技能为 googleadsagent.ai™ 的系统提供支持，该系统根据涵盖 116 项服务、155 多个城市的矩阵生成了 18,000 多个页面；每个页面都有独特的内容、结构化数据和 SEO 元数据，并在边缘渲染，全球 TTFB 均低于 50 毫秒。

城市 × 服务页面矩阵展示了边缘渲染在大规模场景下的优势。Workers 无需预先构建 18,000 个静态页面，也不必将每个请求都路由到集中式源站，而是使用模板、来自 KV 的城市专属数据以及来自 D1 的服务元数据，按需生成页面。渲染后的页面会在边缘缓存，并采用 stale-while-revalidate 语义，在即时响应的同时确保内容保持最新。

这种模式不仅适用于 SEO 着陆页，也适用于任何遵循组合式模板的内容：产品 × 地点页面、活动 × 场馆页面，或服务 × 行业页面。边缘渲染流水线将模板解析、数据注入、结构化数据生成（JSON-LD）、元标签构建和缓存管理整合为一个统一系统。

适用场景

• 根据组合矩阵生成页面（城市 × 服务、产品 × 类别）
• 提供对 SEO 至关重要且必须在全球范围内实现快速 TTFB 的内容
• 构建拥有数千个唯一 URL 的着陆页系统
• 替代需要数小时才能完成构建的静态站点生成
• 在边缘实现 stale-while-revalidate 缓存
• 为每个页面动态渲染结构化数据（JSON-LD）

工作原理

graph TD
    A[Request: /google-ads/chicago] --> B[Worker: Parse city + service]
    B --> C{Edge Cache Hit?}
    C -->|Hit| D[Return Cached HTML]
    C -->|Miss| E[Fetch City Data from KV]
    E --> F[Fetch Service Data from D1]
    F --> G[Render Template]
    G --> H[Inject JSON-LD Structured Data]
    H --> I[Generate Meta Tags]
    I --> J[Cache at Edge]
    J --> K[Return Fresh HTML]
    D --> L[Background: Revalidate if Stale]

每个请求都会解析为一个（城市、服务）元组。Worker 会先检查边缘缓存。如果未命中，它会并行获取城市和服务数据、渲染模板、注入结构化数据，并缓存结果。过期条目会触发后台重新验证，不会阻塞响应。

实现

export default {
  async fetch(request: Request, env: Env, ctx: ExecutionContext): Promise<Response> {
    const url = new URL(request.url);
    const [, service, city] = url.pathname.split("/");

    const cacheKey = new Request(url.toString());
    const cache = caches.default;
    let response = await cache.match(cacheKey);

    if (response) {
      const age = parseInt(response.headers.get("age") ?? "0");
      if (age > 3600) {
        ctx.waitUntil(revalidate(env, cache, cacheKey, service, city));
      }
      return response;
    }

    return revalidate(env, cache, cacheKey, service, city);
  },
} satisfies ExportedHandler<Env>;

async function revalidate(
  env: Env, cache: Cache, cacheKey: Request, service: string, city: string
): Promise<Response> {
  const [cityData, serviceData] = await Promise.all([
    env.CITY_KV.get<CityData>(city, "json"),
    env.DB.prepare("SELECT * FROM services WHERE slug = ?").bind(service).first<ServiceData>(),
  ]);

  if (!cityData || !serviceData) {
    return new Response("Not Found", { status: 404 });
  }

  const html = renderPage(cityData, serviceData);
  const response = new Response(html, {
    headers: {
      "Content-Type": "text/html;charset=UTF-8",
      "Cache-Control": "public, s-maxage=86400, stale-while-revalidate=3600",
    },
  });

  await cache.put(cacheKey, response.clone());
  return response;
}

function renderPage(city: CityData, service: ServiceData): string {
  const jsonLd = {
    "@context": "https://schema.org",
    "@type": "LocalBusiness",
    name: `${service.name} in ${city.name}`,
    address: { "@type": "PostalAddress", addressLocality: city.name, addressRegion: city.state },
    geo: { "@type": "GeoCoordinates", latitude: city.lat, longitude: city.lng },
    url: `https://googleadsagent.ai/${service.slug}/${city.slug}`,
  };

  return `<!DOCTYPE html>
<html lang="en">
<head>
  <title>${service.name} in ${city.name} | googleadsagent.ai</title>
  <meta name="description" content="${service.description} for businesses in ${city.name}, ${city.state}." />
  <script type="application/ld+json">${JSON.stringify(jsonLd)}</script>
</head>
<body>${service.template.replace("{{city}}", city.name)}</body>
</html>`;
}

最佳实践

• 使用 Promise.all 并行获取城市和服务数据，切勿按顺序获取
• 使用 stale-while-revalidate 在后台刷新缓存时继续提供缓存内容
• 为每个页面生成 JSON-LD 结构化数据，最大限度提高搜索引擎可见性
• KV 值保持在 25MB 以下，D1 查询保持在 100ms 以下，以确保边缘性能稳定
• 实现一个能够反映当前城市 × 服务矩阵的网站地图生成器
• 监控缓存命中率——生产流量的目标是超过 95%

平台兼容性

平台	支持情况	备注
Cursor	完全支持	Worker 开发 + 部署
VS Code	完全支持	Wrangler 集成
Windsurf	完全支持	边缘优先开发
Claude Code	完全支持	模板 + Worker 生成
Cline	完全支持	支持边缘架构
aider	部分支持	仅生成模板

相关技能

• Cloudflare Workers
• CI/CD 流水线
• 可观测性
• CodeQL 和 Semgrep

关键词

edge-rendering city-service-pages cloudflare-workers seo json-ld stale-while-revalidate dynamic-pages structured-data

---

© 2026 googleadsagent.ai™ | Agent Skills™ | MIT License