staleTimes

staleTimes 是一项实验性功能,用于在客户端路由缓存中缓存页面片段。

您可以通过设置实验性的 staleTimes 标志来启用此功能并提供自定义重新验证时间:

next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    staleTimes: {
      dynamic: 30,
      static: 180,
    },
  },
}

module.exports = nextConfig

staticdynamic 属性根据不同类型的链接预取对应不同的时间周期(以秒为单位)。

  • dynamic 属性用于页面既非静态生成也未被完全预取的情况(例如 prefetch={true}
    • 默认值:0 秒(不缓存)
  • static 属性用于静态生成的页面,或当 Link 组件的 prefetch 属性设为 true 时,或调用 router.prefetch
    • 默认值:5 分钟

须知:

  • 加载边界在此配置定义的 static 周期内被视为可重用
  • 这不会影响部分渲染意味着共享布局不会在每次导航时自动重新获取,只有发生变化的页面片段会更新
  • 这不会改变前进/后退缓存行为,以防止布局偏移和浏览器滚动位置丢失

您可以在此处了解更多关于客户端路由缓存的信息。

版本历史

版本变更内容
v15.0.0dynamicstaleTimes 默认值从 30 秒改为 0 秒
v14.2.0引入实验性 staleTimes 功能

On this page