Next.js缓存与Vercel缓存是否为同一事物？相关缓存疑问

我最近在研究Next.js的缓存机制和Vercel缓存，但搞不清各类缓存的差异和底层工作原理。

已知的Next.js 13缓存信息 #

• Next.js Cache是可全局分布式部署的持久化HTTP缓存
• Next.js 13允许开发者在组件及fetch()请求层面控制缓存
• 可通过按需更新或预设时间间隔，用新数据重新验证（更新）Next.js缓存
• Next.js构建输出中有一个名为.next/cache的文件夹

已知的Vercel缓存信息 #

• Vercel边缘网络缓存在边缘节点缓存内容
• 静态文件在首次请求后自动在边缘节点缓存
• Vercel不允许绕过静态文件的缓存
• 响应头X-Vercel-Cache包含所请求资源的缓存状态详情
• Vercel存在“构建缓存”，用于存储.next/cache、node_modules、package-lock.json
• 每次构建时，仅当这些文件夹内容变化时，构建缓存才会更新对应内容
• 可删除已有的构建缓存

我的疑问 #

1. Next.js缓存存储在哪里？
2. Vercel缓存存储在哪里？
3. .next/cache文件夹的用途是什么？
4. Next.js缓存与Vercel缓存是否为同一事物？即Vercel是否仅为.next/cache中存储的资源提供实际存储？
5. 若通过fetch()获取的数据被缓存（如Next.js所述），这与构建时或请求时动态生成的完整HTML/JS/CSS包的缓存有何区别/关联？

问题解答 #

1. Next.js缓存存储在哪里？ #

Next.js缓存的存储位置分场景而定：

• 本地开发/自建部署：缓存会存放在项目目录的.next/cache文件夹，运行时也会在内存中维护一份副本，提升访问速度。
• Vercel部署：Next.js的持久化缓存会被Vercel托管到其分布式存储系统，同时常用内容会被缓存到Vercel的全球边缘节点，保障用户访问效率。

2. Vercel缓存存储在哪里？ #

Vercel缓存分两类，存储位置不同：

• 边缘网络缓存：存储在Vercel遍布全球的边缘节点服务器上，这类节点贴近用户，能快速返回缓存内容。
• 构建缓存：存储在Vercel的远程构建服务器中，用于复用构建过程中的依赖和中间产物，减少重复构建的时间成本。

3. .next/cache文件夹的用途是什么？ #

这是Next.js在构建和运行时的本地缓存目录，核心作用包括：

• 存储预渲染页面的中间产物、静态资源的优化版本；
• 缓存fetch()请求获取的业务数据（静态渲染或增量静态再生场景下），避免重复调用外部接口；
• 存储依赖安装的缓存内容，加速后续构建流程；
• 本地开发时，复用缓存内容避免重复构建或请求数据，提升开发效率。

4. Next.js缓存与Vercel缓存是否为同一事物？ #

二者不是同一事物，但存在紧密关联：

• Next.js缓存是框架层面的缓存规则体系，定义了缓存逻辑、存储策略、重新验证机制，可在任何部署环境（本地、Vercel、第三方平台）生效；
• Vercel缓存是平台层面的落地实现，包含两种类型：
  • 边缘缓存会遵循Next.js的缓存规则，将静态资源、预渲染页面、缓存的fetch数据分发到全球边缘节点；
  • 构建缓存则托管.next/cache等构建产物，加速后续部署流程。
    简单来说，Next.js提供缓存的“规则和逻辑”，Vercel提供“全球分布式的存储与分发能力”来落地这些规则。

5. fetch()缓存与HTML/JS/CSS包缓存的区别/关联？ #

区别：

• 缓存对象不同：
  • fetch()缓存的是接口返回的业务数据（如JSON格式的内容），属于数据层面的缓存；
  • HTML/JS/CSS包缓存的是页面最终构建产物，属于前端资源层面的缓存。
• 缓存时机不同：
  • fetch()缓存可在构建时（静态渲染）、运行时（增量再生或动态渲染）触发；
  • HTML/JS/CSS包缓存一般在构建完成后生成，静态资源会被Vercel自动缓存到边缘节点。
• 更新策略不同：
  • fetch()缓存可通过按需重新验证、时间间隔重新验证单独更新，无需重新构建整个页面；
  • HTML/JS/CSS包的更新通常需要重新构建部署，或通过增量静态再生更新特定页面的产物。

关联：

• 静态渲染场景下，fetch()缓存的数据会被嵌入到HTML中，最终生成的HTML包会被缓存到边缘节点；
• 当fetch()数据更新并触发重新验证时，Next.js会重新生成对应的HTML/JS包，之后Vercel会同步更新边缘节点的缓存内容。

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