边缘计算三：从 CDN 到边缘 —— 你的 JS 已经部署在世界尽头

曾几何时，我们把静态资源部署到 CDN 上就很满足了。

后来，Vercel、Cloudflare 告诉你：

“兄弟，你的 JS 不只是缓存到世界各地，它已经能在边缘节点‘动起来’了。”

这不只是简单的加速，而是：

逻辑、数据、渲染，都可以在离用户最近的地方完成。

今天我们聊聊：

• 什么是 Edge？为什么不是传统 CDN？

• JS 是怎么在边缘节点上执行的？

• 前端开发者能做什么？又该注意什么？

一、CDN：从缓存到逻辑的“演化”

先从熟悉的 CDN 说起：

功能	描述
静态资源缓存	JS / CSS / HTML 储存在全球节点
回源机制	找不到时回原始服务器
响应加速	用户就近访问，加快加载速度

这是一种“读缓存”的机制。

但随着需求复杂化，比如：

• 需要根据地域显示不同内容

• 页面要做实时 AB 测试 / 用户画像推荐

• 动态渲染页面 + 验证逻辑提前执行

传统 CDN 做不到了——这时就要 Edge Computing（边缘计算） 上场了。

二、边缘函数（Edge Functions）来了！

不同于传统服务器，边缘函数在 CDN 节点上执行 JS 代码，它们：

• 离用户更近（几十毫秒响应）

• 没有冷启动问题（如 Cloudflare Workers）

• 适合轻逻辑、个性化、权限处理等场景

举个栗子 ：

// middleware.ts（Next.js 中）
export function middleware(req) {
  const country = req.geo.country || 'CN';
  const res = NextResponse.next();
  res.headers.set('x-country', country);
  return res;
}

这段代码会在用户请求到达页面前执行，可以做重定向、数据标识、身份验证等。

三、主流平台的边缘能力比较

平台	Edge 能力	冷启动	限制	语言支持
Vercel Edge Functions	强，集成 Next.js	无冷启动	50ms 内执行	JS/TS
Cloudflare Workers	极快	无冷启动	CPU 限制	JS/TS, WASM
Netlify Edge	和中间件融合	几乎无感	文件大小限制	JS
AWS Lambda@Edge	功能强大	有冷启动	配置复杂	多种语言

四、前端开发者的用武之地

边缘函数并不是“后端专属”，前端可以：

✅ 实现 AB 实验

根据 cookie 分组，在边缘层做跳转或标签注入。

if (req.cookies.get("exp") === "A") {
  return NextResponse.redirect('/version-a')
}

✅ 做 IP/地域判断，个性化展示

if (req.geo.country === "JP") {
  return NextResponse.rewrite('/ja')
}

✅ 安全处理前置：如 token 校验

const token = req.cookies.get("token");
if (!validate(token)) return redirect('/login');

五、注意点（别兴奋太早）

限制点	说明
无状态	每次调用不记得上次内容 → 需用 cookie / query 传状态
计算资源有限	适合轻逻辑，别在边缘节点跑大模型
调试不方便	本地模拟有限，推荐日志打点 + 在线调试
价格按请求计费	千万不要在循环里用边缘函数调用自己…

六、总结一句话

CDN 是把你的页面“推近”用户，Edge 是把你的“逻辑和判断力”推近用户。

前端开发者只要会写 JS，就可以轻松参与这一场架构级别的体验革命。