nextjs缓存机制

nextjs缓存

中涉及到的多层缓存机制，目的是优化性能、减少服务器负载和加快页面加载速度。图表分为客户端（Client）和服务端（Server）两部分，并区分了构建时（Build Time）和请求时（Request Time）两个阶段。

我们来逐步解析各个部分和流程：

核心组件和缓存层：

1. Client (客户端):

   • Router Cache (内存缓存): 存在于用户浏览器内存中。它存储了访问过的路由的 React Server Component (RSC) Payload。当用户在应用内导航时，如果目标路由的 Payload 在这个缓存中，可以非常快速地渲染页面，无需向服务器发送新请求。这是纯客户端的内存缓存，关闭标签页或刷新页面通常会清空。
   • RSC Payload: 这是 React Server Components 渲染结果的一种序列化格式，包含了渲染 UI 所需的信息，但不包含 JavaScript 包。

2. Server (服务端):

   • Full Route Cache (持久化缓存): 这是服务端的一个持久化缓存层。它存储了完整路由的渲染结果，包括 RSC Payload 和/或对应的 HTML。这个缓存通常在构建时（Build Time）生成（对于静态页面）或在第一次请求后按需生成并缓存（对于动态但可缓存的页面，如 ISR）。它是持久化的，意味着即使服务器重启，缓存内容（通常存储在文件系统或专门的缓存存储中）也能保留。
   • Request Memoization (内存缓存): 这是一个存在于单次服务器请求处理过程中的内存缓存。当在同一次请求的渲染过程中多次调用同一个函数（特别是数据获取函数 Workspace）时，这个缓存会存储函数调用的结果。这样可以避免在单次渲染中重复执行相同的计算或数据请求。请求结束后，这个缓存通常会被清除。
   • Data Cache (持久化缓存): 这是另一个服务端的持久化缓存层，专门用于缓存数据获取（如 Workspace 请求）的结果。它可以跨多个请求、甚至跨部署（如果配置得当）共享缓存的数据。这极大地减少了对后端数据源（Data Source）的直接请求次数。缓存的数据通常是 JSON 格式。
   • Data Source: 指的是你的数据库、外部 API 或任何提供应用程序所需数据的源头。

流程解析：

1. Build Time (构建时):

   • 这个阶段通常在你运行 next build 或类似命令时发生。
   • 对于预渲染的页面（如静态页面 /a），框架会执行：
     • Rendering: 调用页面组件的渲染逻辑。
     • Workspace: 如果页面需要数据，会执行数据获取操作。
     • Data Cache Interaction:
       • 第一次构建时，Data Cache 中没有数据 (MISS)。
       • 请求会打到 Data Source (HIT Data Source)。
       • 获取到的数据（JSON）会被存储 (SET) 到持久化的 Data Cache 中。
     • Request Memoization: 在本次渲染过程中，获取到的数据（或函数返回值）也会被存储 (SET) 到 Request Memoization 缓存中，以备本次渲染中可能存在的重复调用。
     • Render To Payload: 将渲染结果生成为 RSC Payload。
     • Full Route Cache (Payload): 生成的 RSC Payload 被存储 (SET) 到持久化的 Full Route Cache 中。
     • Render To HTML: (对于需要 HTML fallback 或完全静态导出的页面) 将 RSC Payload 进一步渲染成 HTML。
     • Full Route Cache (HTML): 生成的 HTML 也可能被存储 (SET) 到 Full Route Cache 或作为静态文件输出。

2. Request Time (请求时):

   • 当用户浏览器请求页面 /a 时：
   • Client Check: 浏览器首先检查客户端的 Router Cache。在此示例流程中，假设是首次加载或缓存已失效，结果是 MISS。
   • Server Check: 请求到达服务器。
   • Full Route Cache Check: 服务器检查持久化的 Full Route Cache 中是否存在 /a 的缓存项。在此示例流程中，由于构建时已经生成并缓存了 /a，结果是 HIT。
   • Serve from Cache: 因为 Full Route Cache 命中，服务器可以直接返回缓存的 RSC Payload（或 HTML）给客户端，无需重新执行渲染或数据获取。
   • Client Update: 客户端收到 RSC Payload 后，会将其存储 (SET) 到客户端的 Router Cache 中，以便后续快速导航。

总结：

这张图清晰地展示了 Next.js (App Router) 如何利用多层缓存（客户端内存缓存、服务端持久化路由/数据缓存、服务端单次请求内存缓存）来优化应用性能：

• 构建时缓存 (Build Time Caching / Full Route Cache / Data Cache): 预先渲染页面和缓存数据，使得首次请求能够快速响应（对于 SSG/ISR）。
• 请求时缓存 (Request Time Caching / Full Route Cache / Data Cache HIT): 对于后续请求，直接从持久化缓存提供服务，避免重复渲染和数据获取。
• 客户端导航缓存 (Client-side Router Cache): 加速用户在应用内的跳转。
• 渲染过程优化 (Request Memoization): 避免在单次服务器渲染中重复执行函数调用（尤其是 Workspace）。

通过这些缓存策略的协同工作，可以显著减少服务器负载、降低对数据源的压力，并为最终用户提供更快的加载和导航体验。