前端边缘计算与 CDN 策略：从静态缓存到边缘渲染的性能跃迁

前端边缘计算与 CDN 策略：从静态缓存到边缘渲染的性能跃迁

一、CDN 缓存对动态内容的失效

传统的 CDN 策略很简单：把静态资源（JS/CSS/图片）推到边缘节点，设置一年缓存。但对于一个需要登录态才能访问的 Dashboard 页面，CDN 缓存是无效的——每个用户的页面内容都不同，CDN 只能穿透到源站。

这导致了一个矛盾：离用户最近的 CDN 节点只承载了 20% 的流量（静态资源），80% 的动态流量仍需回源到千里之外的中心服务器。如果边缘节点不仅能缓存内容，还能执行代码（SSR、鉴权、A/B 分流），就能将动态内容的处理也迁移到边缘。

二、边缘计算的部署拓扑

graph TB
subgraph 用户
U1[用户 东京]
U2[用户 伦敦]
U3[用户 纽约]
end

subgraph 边缘节点
E1[Edge 东京<br/>SSR 渲染<br/>图片优化<br/>A/B 分流]
E2[Edge 伦敦<br/>SSR 渲染<br/>图片优化<br/>A/B 分流]
E3[Edge 纽约<br/>SSR 渲染<br/>图片优化<br/>A/B 分流]
end

subgraph 中心服务
CENTER[Origin Server<br/>API + 数据库]
DB[(PostgreSQL)]
end

U1 –>|延迟 < 10ms| E1
U2 –>|延迟 < 10ms| E2
U3 –>|延迟 < 10ms| E3

E1 –>|缓存未命中| CENTER
E2 –>|缓存未命中| CENTER
E3 –>|缓存未命中| CENTER
CENTER –> DB

边缘节点分布在各大洲，距离用户物理距离最近。动态内容（如个性化首页）在边缘节点上通过 Edge Function 渲染，只有数据请求回源到中心服务器。这个架构将 TTFB 从跨洲的 200ms+ 降至同城的 10-30ms。

三、Next.js Edge Middleware 实现

// middleware.ts —— 运行在 Vercel/Cloudflare Edge
// 设计意图：边缘节点处理认证、重定向、国际化、A/B 测试
// 在请求到达源服务器之前完成判断

import { NextRequest, NextResponse } from 'next/server';

export async function middleware(request: NextRequest) {
const { pathname, hostname, searchParams } = request.nextUrl;

// 1. 地理位置路由——边缘可直接获取请求来源国家
const country = request.geo?.country || 'US';

// 欧洲用户重定向到 EU 版本
if (country === 'DE' || country === 'FR') {
if (!pathname.startsWith('/eu')) {
return NextResponse.redirect(
new URL(`/eu${pathname}`, request.url)
);
}
}

// 2. 国际化——在边缘检测语言偏好
const acceptLang = request.headers.get('accept-language');
const preferredLocale = acceptLang?.split(',')[0]?.split('-')[0];

// 中文用户 -> /zh 路由
if (preferredLocale === 'zh' && !pathname.startsWith('/zh')) {
// 不做重定向以避免额外请求——直接在中间件重写
return NextResponse.rewrite(
new URL(`/zh${pathname}`, request.url)
);
}

// 3. A/B 测试——边缘分流
// 基于 cookie 的稳定分组
const abVariant = request.cookies.get('ab_variant')?.value;
if (!abVariant && pathname === '/landing') {
// 首次访问——随机分配分组
const variant = Math.random() < 0.5 ? 'a' : 'b';
const response = NextResponse.rewrite(
new URL(`/landing/${variant}`, request.url)
);
response.cookies.set('ab_variant', variant, {
maxAge: 30 * 24 * 60 * 60,
});
return response;
}

// 4. 认证检查——在边缘而非 API 层
// JWT 在边缘验证，不回到源站
if (pathname.startsWith('/dashboard')) {
const token = request.cookies.get('auth_token')?.value;
if (!token) {
return NextResponse.redirect(new URL('/login', request.url));
}

// JWT 在边缘验证——利用 Web Crypto API
try {
await verifyJWT(token);
} catch {
const response = NextResponse.redirect(
new URL('/login', request.url)
);
response.cookies.delete('auth_token');
return response;
}
}

// 5. 安全头注入——在边缘添加
const response = NextResponse.next();
response.headers.set('X-Frame-Options', 'DENY');
response.headers.set('X-Content-Type-Options', 'nosniff');
response.headers.set(
'Strict-Transport-Security',
'max-age=31536000; includeSubDomains'
);

return response;
}

// 边缘环境的 JWT 验证——不依赖 Node.js 的 crypto
async function verifyJWT(token: string): Promise<boolean> {
// Edge Runtime 使用 Web Crypto API
const encoder = new TextEncoder();
const [headerB64, payloadB64, signatureB64] = token.split('.');

// 简单校验——生产环境使用 jose 库
try {
const payload = JSON.parse(
atob(payloadB64.replace(/-/g, '+').replace(/_/g, '/'))
);
// 检查过期时间
if (payload.exp && payload.exp * 1000 < Date.now()) {
return false;
}
return true;
} catch {
return false;
}
}

// Middleware 匹配规则——不在静态资源上运行
export const config = {
matcher: [
'/((?!_next/static|_next/image|favicon.ico|.*\\\\.svg$).*)',
],
};

五个边缘可做的处理：

四、边缘计算的限制与代价

Edge Runtime 的 API 限制。Vercel Edge 和 Cloudflare Workers 不支持 Node.js 的 fs、net 等模块。数据库驱动（如 Prisma）需要特殊配置才能运行在边缘。这意味着边缘只能做轻量级处理——认证、路由、重定向，复杂的业务逻辑仍需回到 Node.js 运行时。

边缘函数的冷启动。首次部署后或长时间无请求后，边缘函数需要冷启动。Cloudflare Workers 的冷启动约 5ms，但复杂函数（如完整的 SSR）冷启动可达 200ms+。

分布式状态的一致性。如果在边缘做会话管理，同一用户的两次请求可能被路由到不同边缘节点。需要使用 Durable Objects 或全局 KV 存储来同步状态。

五、总结

前端边缘计算的核心策略：

落地建议：