Nextjs 数据缓存
Next.js 学习笔记（六）——缓存_revalidatepath-CSDN博客 概述 以下是不同缓存机制及其目的的高级概览： 默认情况下，Next.js 会尽可能多地缓存，以提高性能并降低成本。这意味着路由会静态渲染，数据请求也会缓存，除非你选择退出。下图显示了默认的缓存行为：在构建时静态渲染路由，以及首次访问静态路由。 缓存行为的变化取决于路由是静态渲染还是动态渲染，数据是缓存还是未缓存，以及请求是首次访问的一部分还是后续导航的一部分。根据使用情况，你可以为单个路由和数据请求配置缓存行为。 请求记忆化 React 扩展了 fetch API，可自动记忆具有相同 URL 和选项的请求。这意味着你可以在 React 组件树中的多个位置调用获取相同数据的函数，而只需执行一次。 什么时机自动重新验证？ 由于记忆化不会在跨服务器请求中共享，而且只应用在渲染过程中，因此无需重新验证。 手动清除缓存 要在 fetch 请求中选择退出记忆化，你可以在请求参数中配置 cache: 'no-store' 数据缓存 Next.js 有一个内置的数据缓存，可以在传入的服务器请求和部署中持久化数据提取的结果。之所以能做到这一点，是因为 Next.js 扩展了本地 fetch API，以允许服务器上的每个请求设置自己的持久缓存语义。 需要知道：在浏览器中，fetch 的 cache 选项表示请求将如何与浏览器的 HTTP 缓存交互，而在 Next.js 中，cache 选项表示服务器端请求将如何与服务器的数据缓存交互。 缓存数据可通过以下两种方式手动重新验证：
- 基于时间的重新验证 // 最多每小时验证一次fetch('https://...', { next: { revalidate: 3600 } })
- 按需重新验证： 根据事件（如：表单提交）重新验证数据。数据可按路径（revalidatePath）或缓存标签（revalidateTag）进行按需重新验证。 初始设置关闭缓存 对于单个数据获取，可以通过将 cache 选项设置为 no-store来选择退出缓存。这意味着只要调用 fetch，就会获取数据。 // 为单个 fetch 请求选择退出缓存fetch(https://..., { cache: 'no-store' }) 或者，你也可以使用路由段配置选项来选择退出特定路由段的缓存。这将影响路由段中的所有数据请求，包括第三方库。 // 选择不对路由段中的所有数据请求进行缓存export const dynamic = 'force-dynamic' revalidatePath revalidatePath 允许你在一次操作中手动重新验证数据并重新渲染特定路径下的路由段。调用 revalidatePath 方法可重新验证数据缓存，进而使全路由缓存失效。 revalidatePath('页面', 类型 'page' | 'layout') 你可以在两个地方使用 revalidatePath，具体取决于你要实现的目标：
- 路由处理程序 - 响应第三方事件（例如：webhook）时重新验证数据。
- 服务器操作 - 在用户交互（例如：提交表单、点击按钮）后重新验证数据。 使用 来告诉 nextjs 清除特定路径下的缓存数据。 全路由缓存 Next.js 的默认行为是在服务器上缓存路由的渲染结果（React 服务器组件有效负载和 HTML）。这适用于在构建时或重新验证时静态渲染的路由。 静态和动态渲染 路由在构建时是否被缓存取决于它是静态渲染还是动态渲染。静态路由默认为缓存，而动态路由在请求时渲染，不进行缓存。 默认情况下，全路由缓存是持久的。这意味着渲染输出会在用户请求时缓存。 令缓存失效 有两种方法可以使完整路由缓存失效：
- 重新验证数据： 通过在服务器上重新渲染组件并缓存新的渲染输出，重新验证数据缓存将反过来使路由器缓存失效。
- 重新部署： 与在不同部署中持续存在的数据缓存的区别是，完整路由缓存会在新部署时被清除。 手动退出渲染 你可以选择不使用全路由缓存，或者换句话说，通过以下方式为每个传入请求动态渲染组件：
- 使用动态函数： 这将从全路由缓存中选择路由，并在请求时动态渲染。数据缓存仍可使用。
- 使用 dynamic = 'force-dynamic' 或 revalidate = 0 路由段配置选项： 这将跳过全路由缓存和数据缓存。这意味着在每次向服务器发送请求时，都会对组件进行渲染并获取数据。路由器缓存仍然适用，因为它是客户端缓存。
- 选择退出数据缓存： 如果一个路由有一个未缓存的 fetch 请求，这将使该路由退出全路由缓存。每次传入请求时，都会获取特定 fetch 请求的数据。其他未选择退出缓存的 fetch 请求仍将在数据缓存中缓存。这样就可以实现缓存与非缓存数据的混合。 路由缓存 在客户端，Next.js 有一个内存客户端缓存，用于在用户会话期间存储按单个路由段分割的 React 服务器组件有效载荷。这就是所谓的路由器缓存。 当用户在路由之间导航时，Next.js 会缓存已访问的路线段，并预取用户可能导航到的路由（基于视口中的
来源整理自：vue3js.cn 面试官系列
