Vercel缓存机制与区域配置问题咨询及生产前建议

AI 小北

2026-6-15

Vercel缓存工作原理与配置优化指南

一、Vercel缓存核心原理

Vercel的缓存分为三层，各司其职：

Edge Cache：部署在全球边缘节点的分布式缓存，是最贴近用户的一层，命中后直接返回内容，耗时极低。
Serverless Function缓存：针对函数内部fetch请求的缓存，通过cache或revalidate指令控制，缓存存储在函数运行所在区域的节点，而非全局边缘节点。
构建缓存：构建阶段生成的静态资源缓存，用于加速后续部署流程。

SSR场景下的fetch缓存，关键是通过指令标记请求可缓存，但要注意：这类缓存默认存在函数运行节点，而非全局Edge层——这是很多开发者容易误解的点。

本地1ms、Vercel上60-80ms的差异，核心原因大概率是缓存层级或配置问题，排查方向：

未命中Edge层缓存：如果仅配置了函数内的fetch缓存，而未让SSR页面进入Edge Cache，每次请求仍会触发函数执行，从函数节点的本地缓存读取内容，加上函数启动、渲染的耗时，60-80ms属于该场景的正常范围。

缓存指令配置错误：检查fetch请求的参数，是否误用了cache: 'no-store'或revalidate: 0导致缓存未生效。正确配置示例：

// Next.js 13+ App Router
const res = await fetch('https://your-api.com/data', {
  cache: 'force-cache',
  next: { revalidate: 3600 } // 缓存1小时
});

已设置法国区域但函数仍在美国运行，常见原因：

配置格式错误：检查vercel.json的区域配置是否覆盖目标函数，正确格式示例：

{
  "functions": {
    "app/**/*.{js,ts,tsx}": {
      "regions": ["fra1"] // 法国巴黎区域代码
    }
  }
}

预览环境未继承配置：预览部署默认使用美区，仅生产部署会应用自定义区域配置，需切换到生产环境验证。
Edge与Serverless函数混淆：Edge Function会自动在用户最近节点运行，无需手动指定区域；而Serverless Function必须显式配置regions才会生效。
部署缓存未清除：旧的部署缓存可能导致新配置未加载，需清除Vercel部署缓存后重新部署。

让SSR页面进入Edge Cache：对可缓存的SSR页面设置revalidate参数，让页面内容存储到全球边缘节点，用户请求直接命中边缘，无需触发函数执行，耗时可降至10ms以内。示例：
```
// App Router页面组件
export const revalidate = 3600; // 每小时重新验证缓存
```
函数与API源同区域部署：确保Serverless Function的运行区域和后端API所在区域一致（如都在法国），消除跨区网络延迟。
合理选择函数类型：高频访问、低延迟需求的页面用Edge Function，自动就近运行；重计算场景用指定区域的Serverless Function。
分层设计缓存策略：静态资源设置永久缓存（cache-control: public, max-age=31536000, immutable），动态内容按更新频率设置revalidate，同时让后端API自身开启缓存。
监控缓存与区域状态：在Vercel Dashboard的Functions页面查看缓存命中率，确认缓存策略生效；同时检查函数运行区域，验证配置是否落地。

内容的提问来源于stack exchange，提问作者AHOYAHOY