边缘计算前端2026 | 无服务器边缘函数与Cloudflare Workers指南

边缘计算已从基础设施关注点转变为关键的前端开发技能。2026年，随着开发者部署在全球用户几毫秒内执行的代码，前端和后端之间的界限继续模糊。本综合指南涵盖了前端开发者需要了解的关于边缘计算的一切——从基本概念到生产就绪的实现。

无论您是优化现有应用程序还是设计新系统，理解边缘计算对于构建现代高性能Web应用程序至关重要。

对于前端开发者来说，边缘计算是什么？

边缘计算将计算和数据存储带到更接近数据源的位置。对于前端开发者来说，这意味着在靠近用户的分布式服务器上运行服务器端逻辑，而不是在集中的数据中心。

传统架构 vs 边缘架构

传统架构：

东京用户 → CDN（静态文件） → 弗吉尼亚源服务器 → 数据库
                                   ↓
                              500ms以上延迟

边缘架构：

东京用户 → 东京边缘服务器 → 源（如需要）
                    ↓
               50ms延迟
               （动态内容在边缘渲染）

为什么前端开发者需要边缘技能

Web平台的演变从根本上改变了”前端”的含义：

服务器组件：React Server Components、Astro等技术模糊了客户端-服务器边界
边缘渲染：为个性化动态内容在边缘进行SSR和SSG
API路由：前端框架现在包含后端功能
实时功能：WebSockets和流的边缘原生解决方案

边缘平台：前端开发者指南

多个平台提供边缘计算功能。了解它们的优势有助于选择正确的工具。

Vercel边缘函数

Vercel边缘函数运行在Vercel的边缘网络上，由V8隔离驱动。非常适合Next.js应用程序。

主要特性：

亚毫秒冷启动
流式响应
默认全球部署
原生Next.js集成

基本边缘函数：

// app/api/hello/route.ts
export const runtime = 'edge';

export async function GET(request: Request) {
  const { searchParams } = new URL(request.url);
  const name = searchParams.get('name') || 'World';

  return new Response(`Hello, ${name}!`, {
    headers: {
      'content-type': 'text/plain',
    },
  });
}

边缘中间件：

// middleware.ts
import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';

export function middleware(request: NextRequest) {
  // 从边缘获取用户国家
  const country = request.geo?.country || 'US';

  // 基于位置个性化
  const response = NextResponse.next();
  response.headers.set('x-user-country', country);

  // 边缘A/B测试
  const bucket = Math.random() < 0.5 ? 'control' : 'experiment';
  response.cookies.set('ab-bucket', bucket);

  return response;
}

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

Cloudflare Workers

Cloudflare Workers提供最成熟的边缘计算平台，具有广泛的API。

主要特性：

全球200多个边缘位置
边缘数据的KV存储
状态应用的Durable Objects
边缘机器学习的Workers AI

基本Worker：

// src/index.js
export default {
  async fetch(request, env, ctx) {
    const url = new URL(request.url);

    if (url.pathname === '/api/data') {
      // 从边缘KV存储获取
      const cachedData = await env.MY_KV.get('data-key', 'json');

      if (cachedData) {
        return Response.json(cachedData);
      }

      // 从源获取并缓存
      const response = await fetch('https://api.origin.com/data');
      const data = await response.json();

      // 缓存1小时
      ctx.waitUntil(env.MY_KV.put('data-key', JSON.stringify(data), {
        expirationTtl: 3600
      }));

      return Response.json(data);
    }

    return new Response('Not Found', { status: 404 });
  }
};

Wrangler配置：

# wrangler.toml
name = "my-edge-app"
main = "src/index.js"
compatibility_date = "2026-01-01"

[[kv_namespaces]]
binding = "MY_KV"
id = "abc123"

[vars]
ENVIRONMENT = "production"

Deno Deploy

Deno Deploy提供一流TypeScript支持和Web标准API的边缘计算。

主要特性：

开箱即用的TypeScript
Web标准API
内置KV数据库
GitHub集成

Deno边缘函数：

// main.ts
import { serve } from "https://deno.land/[email protected]/http/server.ts";

const kv = await Deno.openKv();

serve(async (request: Request) => {
  const url = new URL(request.url);

  if (url.pathname === "/api/counter") {
    // 边缘原子递增
    const key = ["counters", "visits"];
    const result = await kv.atomic()
      .sum(key, 1n)
      .commit();

    const entry = await kv.get(key);

    return Response.json({
      count: entry.value?.toString() || "0"
    });
  }

  return new Response("Hello from the Edge!");
}, { port: 8000 });

AWS CloudFront Functions & Lambda@Edge

AWS提供两种具有不同功能的边缘计算选项。

CloudFront Functions（轻量级）：

function handler(event) {
  var request = event.request;
  var headers = request.headers;

  // 在边缘添加安全头
  var response = {
    statusCode: 200,
    statusDescription: 'OK',
    headers: {
      'strict-transport-security': { value: 'max-age=31536000' },
      'content-security-policy': { value: "default-src 'self'" },
      'x-content-type-options': { value: 'nosniff' },
      'x-frame-options': { value: 'DENY' }
    }
  };

  return response;
}

Lambda@Edge（完整计算）：

exports.handler = async (event) => {
  const request = event.Records[0].cf.request;

  // 边缘个性化
  const userAgent = request.headers['user-agent'][0].value;
  const isMobile = /Mobile|Android/.test(userAgent);

  if (isMobile) {
    request.uri = request.uri.replace(/\.html$/, '.mobile.html');
  }

  return request;
};

常见边缘计算模式

前端开发者经常在边缘实现这些模式。

模式1：边缘个性化

无需源往返即可提供个性化内容：

// 个性化的Vercel边缘中间件
import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';

export async function middleware(request: NextRequest) {
  const response = NextResponse.next();

  // 获取个性化上下文
  const country = request.geo?.country || 'US';
  const city = request.geo?.city || 'Unknown';
  const userAgent = request.headers.get('user-agent') || '';

  // 确定内容变体
  const isMobile = /Mobile|Android|iPhone/.test(userAgent);
  const locale = getPreferredLocale(request.headers.get('accept-language'));
  const currency = getCurrencyForCountry(country);

  // 为下游使用设置头
  response.headers.set('x-personalization', JSON.stringify({
    country,
    city,
    isMobile,
    locale,
    currency
  }));

  // 重写到个性化内容
  if (request.nextUrl.pathname === '/') {
    return NextResponse.rewrite(
      new URL(`/${locale}/home?currency=${currency}`, request.url),
      { headers: response.headers }
    );
  }

  return response;
}

function getPreferredLocale(acceptLanguage: string | null): string {
  if (!acceptLanguage) return 'en';

  const locales = ['en', 'ja', 'de', 'fr', 'es', 'zh'];
  const preferred = acceptLanguage.split(',')[0].split('-')[0];

  return locales.includes(preferred) ? preferred : 'en';
}

function getCurrencyForCountry(country: string): string {
  const currencyMap: Record<string, string> = {
    US: 'USD',
    JP: 'JPY',
    GB: 'GBP',
    DE: 'EUR',
    MY: 'MYR'
  };

  return currencyMap[country] || 'USD';
}

模式2：边缘A/B测试

实现无客户端闪烁的一致A/B测试：

// A/B测试的Cloudflare Worker
interface Env {
  EXPERIMENTS_KV: KVNamespace;
}

export default {
  async fetch(request: Request, env: Env): Promise<Response> {
    const url = new URL(request.url);

    // 获取或分配实验桶
    const cookies = parseCookies(request.headers.get('cookie'));
    let bucket = cookies['ab-experiment'];

    if (!bucket) {
      // 将新用户分配到实验
      const experiment = await env.EXPERIMENTS_KV.get('homepage-v2', 'json') as {
        variants: { id: string; weight: number }[];
      };

      bucket = assignVariant(experiment.variants);
    }

    // 重写到实验变体
    if (url.pathname === '/') {
      const variantUrl = new URL(url);
      variantUrl.pathname = `/experiments/${bucket}/index.html`;

      const response = await fetch(variantUrl);
      const modifiedResponse = new Response(response.body, response);

      // 设置Cookie以保持一致体验
      modifiedResponse.headers.append(
        'Set-Cookie',
        `ab-experiment=${bucket}; Path=/; Max-Age=2592000; SameSite=Lax`
      );

      // 为分析跟踪分配
      await trackExperimentAssignment(bucket, request);

      return modifiedResponse;
    }

    return fetch(request);
  }
};

function assignVariant(variants: { id: string; weight: number }[]): string {
  const random = Math.random();
  let cumulative = 0;

  for (const variant of variants) {
    cumulative += variant.weight;
    if (random < cumulative) {
      return variant.id;
    }
  }

  return variants[0].id;
}

模式3：边缘端包含（ESI）

从边缘缓存的片段组合页面：

// ESI风格组合的边缘函数
export async function onRequest(context: EventContext) {
  const url = new URL(context.request.url);

  if (url.pathname.startsWith('/product/')) {
    // 并行获取页面组件
    const [header, productContent, recommendations, footer] = await Promise.all([
      fetchCachedFragment('/fragments/header'),
      fetchProductContent(url.pathname),
      fetchPersonalizedRecommendations(context.request),
      fetchCachedFragment('/fragments/footer')
    ]);

    // 组合最终HTML
    const html = `
      <!DOCTYPE html>
      <html>
        <head>
          <title>${productContent.title}</title>
        </head>
        <body>
          ${header}
          <main>${productContent.html}</main>
          <aside>${recommendations}</aside>
          ${footer}
        </body>
      </html>
    `;

    return new Response(html, {
      headers: {
        'content-type': 'text/html',
        'cache-control': 'public, max-age=60, stale-while-revalidate=300'
      }
    });
  }

  return context.next();
}

async function fetchCachedFragment(path: string): Promise<string> {
  // 片段在边缘缓存1小时
  const response = await fetch(`https://origin.com${path}`, {
    cf: { cacheTtl: 3600 }
  });
  return response.text();
}

async function fetchPersonalizedRecommendations(request: Request): Promise<string> {
  // 基于Cookie/地理位置的个性化内容
  const userId = getCookie(request, 'user_id');
  const country = request.cf?.country || 'US';

  const response = await fetch(
    `https://api.origin.com/recommendations?user=${userId}&country=${country}`
  );
  const data = await response.json();

  return renderRecommendations(data);
}

模式4：边缘认证

在请求到达源之前在边缘验证认证：

// 边缘JWT验证
import { jwtVerify } from 'jose';

interface Env {
  JWT_SECRET: string;
}

export default {
  async fetch(request: Request, env: Env): Promise<Response> {
    const url = new URL(request.url);

    // 跳过公共路由的认证
    if (isPublicRoute(url.pathname)) {
      return fetch(request);
    }

    // 提取并验证JWT
    const authHeader = request.headers.get('authorization');

    if (!authHeader?.startsWith('Bearer ')) {
      return new Response('Unauthorized', { status: 401 });
    }

    const token = authHeader.slice(7);

    try {
      const secret = new TextEncoder().encode(env.JWT_SECRET);
      const { payload } = await jwtVerify(token, secret);

      // 向请求添加用户上下文
      const modifiedHeaders = new Headers(request.headers);
      modifiedHeaders.set('x-user-id', payload.sub as string);
      modifiedHeaders.set('x-user-role', payload.role as string);

      const modifiedRequest = new Request(request, {
        headers: modifiedHeaders
      });

      return fetch(modifiedRequest);
    } catch (error) {
      return new Response('Invalid token', { status: 401 });
    }
  }
};

function isPublicRoute(pathname: string): boolean {
  const publicRoutes = ['/login', '/register', '/api/health', '/public'];
  return publicRoutes.some(route => pathname.startsWith(route));
}

模式5：使用Stale-While-Revalidate的智能缓存

在边缘实现智能缓存策略：

// 带智能缓存的Cloudflare Worker
interface Env {
  CACHE_KV: KVNamespace;
}

export default {
  async fetch(request: Request, env: Env, ctx: ExecutionContext): Promise<Response> {
    const cacheKey = new URL(request.url).pathname;

    // 尝试从边缘缓存获取
    const cached = await env.CACHE_KV.getWithMetadata(cacheKey, 'json');

    if (cached.value) {
      const metadata = cached.metadata as { expires: number; stale: number };
      const now = Date.now();

      if (now < metadata.expires) {
        // 新鲜缓存命中
        return Response.json(cached.value, {
          headers: { 'x-cache': 'HIT' }
        });
      }

      if (now < metadata.stale) {
        // Stale-while-revalidate
        ctx.waitUntil(revalidateCache(request, env, cacheKey));

        return Response.json(cached.value, {
          headers: { 'x-cache': 'STALE' }
        });
      }
    }

    // 缓存未命中 - 从源获取
    return revalidateCache(request, env, cacheKey);
  }
};

async function revalidateCache(
  request: Request,
  env: Env,
  cacheKey: string
): Promise<Response> {
  const response = await fetch(`https://api.origin.com${cacheKey}`);
  const data = await response.json();

  // 使用TTL元数据存储
  const now = Date.now();
  await env.CACHE_KV.put(cacheKey, JSON.stringify(data), {
    metadata: {
      expires: now + 60000,      // 新鲜1分钟
      stale: now + 300000        // 过期5分钟
    }
  });

  return Response.json(data, {
    headers: { 'x-cache': 'MISS' }
  });
}

边缘数据存储

边缘计算需要边缘原生数据存储解决方案。

Cloudflare KV

为读取密集型工作负载优化的键值存储：

// 边缘KV操作
interface Env {
  USER_PREFERENCES: KVNamespace;
}

export default {
  async fetch(request: Request, env: Env): Promise<Response> {
    const url = new URL(request.url);
    const userId = url.searchParams.get('userId');

    if (request.method === 'GET') {
      // 读取用户偏好
      const prefs = await env.USER_PREFERENCES.get(`user:${userId}`, 'json');
      return Response.json(prefs || { theme: 'light', language: 'en' });
    }

    if (request.method === 'POST') {
      // 更新偏好
      const body = await request.json();

      await env.USER_PREFERENCES.put(`user:${userId}`, JSON.stringify(body), {
        expirationTtl: 86400 * 30  // 30天
      });

      return Response.json({ success: true });
    }

    return new Response('Method not allowed', { status: 405 });
  }
};

Cloudflare Durable Objects

用于实时应用的边缘状态计算：

// 实时协作的Durable Object
export class DocumentRoom {
  state: DurableObjectState;
  sessions: Map<WebSocket, { userId: string }>;
  document: string;

  constructor(state: DurableObjectState) {
    this.state = state;
    this.sessions = new Map();
    this.document = '';
  }

  async fetch(request: Request): Promise<Response> {
    const url = new URL(request.url);

    if (url.pathname === '/websocket') {
      // 处理WebSocket升级
      const pair = new WebSocketPair();
      const [client, server] = Object.values(pair);

      const userId = url.searchParams.get('userId') || 'anonymous';
      this.handleSession(server, userId);

      return new Response(null, { status: 101, webSocket: client });
    }

    return new Response('Not found', { status: 404 });
  }

  handleSession(webSocket: WebSocket, userId: string) {
    webSocket.accept();
    this.sessions.set(webSocket, { userId });

    // 发送当前文档状态
    webSocket.send(JSON.stringify({
      type: 'sync',
      document: this.document,
      users: Array.from(this.sessions.values()).map(s => s.userId)
    }));

    webSocket.addEventListener('message', (event) => {
      const message = JSON.parse(event.data as string);

      if (message.type === 'edit') {
        // 应用编辑并广播
        this.document = applyEdit(this.document, message.edit);

        this.broadcast({
          type: 'edit',
          userId,
          edit: message.edit
        }, webSocket);
      }
    });

    webSocket.addEventListener('close', () => {
      this.sessions.delete(webSocket);
      this.broadcast({ type: 'user_left', userId });
    });
  }

  broadcast(message: object, exclude?: WebSocket) {
    const json = JSON.stringify(message);

    for (const [ws] of this.sessions) {
      if (ws !== exclude) {
        ws.send(json);
      }
    }
  }
}

Deno KV

Deno Deploy内置的键值数据库：

// 用于边缘数据的Deno KV
const kv = await Deno.openKv();

// 原子事务
async function transferBalance(fromId: string, toId: string, amount: number) {
  const fromKey = ["balances", fromId];
  const toKey = ["balances", toId];

  // 原子检查并更新
  let success = false;

  while (!success) {
    const fromEntry = await kv.get<number>(fromKey);
    const toEntry = await kv.get<number>(toKey);

    const fromBalance = fromEntry.value || 0;
    const toBalance = toEntry.value || 0;

    if (fromBalance < amount) {
      throw new Error("Insufficient balance");
    }

    const result = await kv.atomic()
      .check(fromEntry)
      .check(toEntry)
      .set(fromKey, fromBalance - amount)
      .set(toKey, toBalance + amount)
      .commit();

    success = result.ok;
  }

  return { success: true };
}

// 二级索引
async function addUser(user: { id: string; email: string; name: string }) {
  await kv.atomic()
    .set(["users", user.id], user)
    .set(["users_by_email", user.email], user.id)
    .commit();
}

async function getUserByEmail(email: string) {
  const idEntry = await kv.get<string>(["users_by_email", email]);
  if (!idEntry.value) return null;

  const userEntry = await kv.get(["users", idEntry.value]);
  return userEntry.value;
}

边缘性能优化

用以下优化技巧最大化边缘计算的收益。

流式响应

在内容生成的同时进行流式传输：

// 来自边缘的流式响应
export async function onRequest(context: EventContext): Promise<Response> {
  const { readable, writable } = new TransformStream();
  const writer = writable.getWriter();
  const encoder = new TextEncoder();

  // 立即开始流式传输
  context.waitUntil((async () => {
    // 立即写入HTML头部
    await writer.write(encoder.encode(`
      <!DOCTYPE html>
      <html>
        <head><title>Streaming Page</title></head>
        <body>
          <header>Loading content...</header>
    `));

    // 主内容一旦可用即流式传输
    const mainContent = await fetchMainContent();
    await writer.write(encoder.encode(`
          <main>${mainContent}</main>
    `));

    // 流式传输侧边栏
    const sidebarContent = await fetchSidebarContent();
    await writer.write(encoder.encode(`
          <aside>${sidebarContent}</aside>
    `));

    // 完成页面
    await writer.write(encoder.encode(`
        </body>
      </html>
    `));

    await writer.close();
  })());

  return new Response(readable, {
    headers: { 'content-type': 'text/html' }
  });
}

请求合并

防止缓存未命中时出现惊群效应：

// 边缘请求合并
const inflightRequests = new Map<string, Promise<Response>>();

export async function onRequest(context: EventContext): Promise<Response> {
  const cacheKey = context.request.url;

  // 检查请求是否已在处理中
  const inflight = inflightRequests.get(cacheKey);
  if (inflight) {
    // 等待已有请求完成
    const response = await inflight;
    return response.clone();
  }

  // 发起新请求并保存Promise
  const fetchPromise = fetchWithCache(context.request);
  inflightRequests.set(cacheKey, fetchPromise);

  try {
    const response = await fetchPromise;
    return response;
  } finally {
    // 完成后清理
    inflightRequests.delete(cacheKey);
  }
}

async function fetchWithCache(request: Request): Promise<Response> {
  const cache = caches.default;

  let response = await cache.match(request);

  if (!response) {
    response = await fetch(request);

    // 缓存成功的响应
    if (response.ok) {
      const cloned = response.clone();
      cloned.headers.set('Cache-Control', 'public, max-age=60');
      await cache.put(request, cloned);
    }
  }

  return response;
}

边缘图片优化

在边缘转换和优化图片：

// 边缘图片优化
export async function onRequest(context: EventContext): Promise<Response> {
  const url = new URL(context.request.url);

  if (!url.pathname.startsWith('/images/')) {
    return context.next();
  }

  // 解析优化参数
  const width = parseInt(url.searchParams.get('w') || '0');
  const quality = parseInt(url.searchParams.get('q') || '80');
  const format = url.searchParams.get('f') || 'auto';

  // 根据Accept头判断最佳格式
  const accept = context.request.headers.get('accept') || '';
  const outputFormat = format === 'auto'
    ? accept.includes('image/avif') ? 'avif'
    : accept.includes('image/webp') ? 'webp'
    : 'jpeg'
    : format;

  // 使用Cloudflare Image Resizing
  const imageUrl = `https://origin.com${url.pathname}`;

  const response = await fetch(imageUrl, {
    cf: {
      image: {
        width: width || undefined,
        quality,
        format: outputFormat
      }
    }
  });

  // 添加缓存头
  const headers = new Headers(response.headers);
  headers.set('Cache-Control', 'public, max-age=31536000, immutable');
  headers.set('Vary', 'Accept');

  return new Response(response.body, {
    status: response.status,
    headers
  });
}

测试边缘函数

边缘代码的全面测试策略。

本地开发

在本地运行边缘函数：

// 用Miniflare本地测试Cloudflare Workers
import { Miniflare } from 'miniflare';

const mf = new Miniflare({
  script: `
    export default {
      async fetch(request, env) {
        return new Response('Hello from edge!');
      }
    }
  `,
  modules: true,
  kvNamespaces: ['MY_KV'],
});

const response = await mf.dispatchFetch('http://localhost/');
console.log(await response.text()); // "Hello from edge!"

单元测试

对边缘函数进行隔离测试：

// 边缘函数的Jest测试
import { unstable_dev } from 'wrangler';

describe('Edge API', () => {
  let worker: any;

  beforeAll(async () => {
    worker = await unstable_dev('src/index.ts', {
      experimental: { disableExperimentalWarning: true }
    });
  });

  afterAll(async () => {
    await worker.stop();
  });

  test('returns personalized greeting', async () => {
    const response = await worker.fetch('/api/greet?name=World');
    const text = await response.text();

    expect(response.status).toBe(200);
    expect(text).toBe('Hello, World!');
  });

  test('handles missing parameters', async () => {
    const response = await worker.fetch('/api/greet');
    const text = await response.text();

    expect(text).toBe('Hello, Guest!');
  });
});

集成测试

结合真实依赖测试边缘函数：

// 结合KV存储的集成测试
describe('Edge Cache', () => {
  let mf: Miniflare;
  let kv: any;

  beforeEach(async () => {
    mf = new Miniflare({
      scriptPath: './src/index.ts',
      modules: true,
      kvNamespaces: ['CACHE']
    });

    kv = await mf.getKVNamespace('CACHE');
  });

  test('caches API responses', async () => {
    // 第一次请求——缓存未命中
    const response1 = await mf.dispatchFetch('http://localhost/api/data');
    expect(response1.headers.get('x-cache')).toBe('MISS');

    // 第二次请求——缓存命中
    const response2 = await mf.dispatchFetch('http://localhost/api/data');
    expect(response2.headers.get('x-cache')).toBe('HIT');

    // 验证数据已存入KV
    const cached = await kv.get('/api/data', 'json');
    expect(cached).toBeDefined();
  });
});

安全考量

边缘计算带来了独特的安全挑战。

边缘输入校验

校验并清理所有输入：

// 输入校验中间件
export async function middleware(request: NextRequest) {
  const url = new URL(request.url);

  // 校验查询参数
  for (const [key, value] of url.searchParams) {
    if (!isValidParameter(key, value)) {
      return new Response('Bad Request', { status: 400 });
    }
  }

  // 校验POST/PUT的请求体
  if (['POST', 'PUT', 'PATCH'].includes(request.method)) {
    try {
      const body = await request.json();

      if (!validateRequestBody(body)) {
        return new Response('Invalid request body', { status: 400 });
      }
    } catch {
      return new Response('Invalid JSON', { status: 400 });
    }
  }

  return NextResponse.next();
}

function isValidParameter(key: string, value: string): boolean {
  // 长度限制
  if (key.length > 64 || value.length > 1024) return false;

  // 字符校验
  if (!/^[\w-]+$/.test(key)) return false;

  // SQL注入模式
  const sqlPatterns = /('|"|;|--|\b(SELECT|INSERT|UPDATE|DELETE|DROP)\b)/i;
  if (sqlPatterns.test(value)) return false;

  return true;
}

速率限制

在边缘实现速率限制：

// 使用Cloudflare KV的边缘速率限制
interface Env {
  RATE_LIMITS: KVNamespace;
}

export default {
  async fetch(request: Request, env: Env): Promise<Response> {
    const clientIP = request.headers.get('cf-connecting-ip') || 'unknown';
    const windowKey = `ratelimit:${clientIP}:${Math.floor(Date.now() / 60000)}`;

    // 获取当前计数
    const current = await env.RATE_LIMITS.get(windowKey);
    const count = current ? parseInt(current) : 0;

    // 检查限制（每分钟100次请求）
    if (count >= 100) {
      return new Response('Rate limit exceeded', {
        status: 429,
        headers: {
          'Retry-After': '60',
          'X-RateLimit-Limit': '100',
          'X-RateLimit-Remaining': '0'
        }
      });
    }

    // 递增计数器
    await env.RATE_LIMITS.put(windowKey, String(count + 1), {
      expirationTtl: 120  // 2分钟TTL
    });

    // 处理请求
    const response = await fetch(request);
    const modifiedResponse = new Response(response.body, response);

    modifiedResponse.headers.set('X-RateLimit-Limit', '100');
    modifiedResponse.headers.set('X-RateLimit-Remaining', String(99 - count));

    return modifiedResponse;
  }
};

结论：拥抱边缘优先开发

边缘计算代表了Web开发的未来。随着应用程序要求更低延迟、更高个性化和全球覆盖，边缘计算提供了交付卓越用户体验的架构。

关键要点

选择正确的平台：Next.js用Vercel，复杂工作负载用Cloudflare，TypeScript优先开发用Deno
边缘优先思考：从一开始就考虑边缘计算来设计应用程序
利用边缘数据：为状态边缘应用使用KV存储和Durable Objects
优化流式传输：流式响应以提高感知性能
彻底测试：本地开发和集成测试至关重要

边缘计算的未来

在2026年及以后，边缘计算将继续发展：

边缘AI：在边缘节点运行机器学习推理
WebAssembly扩展：更多语言编译到边缘平台运行
更深集成：前端框架和边缘运行时更紧密耦合

需要边缘开发专业知识？

构建边缘原生应用需要分布式系统、性能优化和现代Web架构的专业知识。我们的离岸开发团队专门使用边缘计算技术构建高性能Web应用程序。

探索Web系统开发了解SaaS开发

准备好将应用程序带到边缘了吗？Web性能的未来是分布式的。

您面临什么边缘计算挑战？分享您的经验和问题。

来源：