Route Segment Config
值得注意的是:
- 如果
cacheComponents标志启用,本页面列出的选项将被禁用,并最终会在未来被弃用。- 路由段选项仅在服务器组件页面、布局或路由处理程序中生效。
generateStaticParams不能在'use client'文件中使用。
路由段选项允许你通过直接导出以下变量来配置 Page、Layout 或 Route Handler 的行为:
| 选项 | 类型 | 默认值 |
|---|---|---|
dynamic | 'auto' | 'force-dynamic' | 'error' | 'force-static' | 'auto' |
dynamicParams | boolean | true |
revalidate | false | 0 | number | false |
fetchCache | 'auto' | 'default-cache' | 'only-cache' | 'force-cache' | 'force-no-store' | 'default-no-store' | 'only-no-store' | 'auto' |
runtime | 'nodejs' | 'edge' | 'nodejs' |
preferredRegion | 'auto' | 'global' | 'home' | string | string[] | 'auto' |
maxDuration | number | 由部署平台设置 |
选项
dynamic
更改布局或页面的动态行为,使其完全静态或完全动态。
export const dynamic = 'auto'
// 'auto' | 'force-dynamic' | 'error' | 'force-static'值得注意的是:
app目录中的新模型倾向于在fetch请求级别进行细粒度的缓存控制,而不是pages目录中在页面级别使用getServerSideProps和getStaticProps的二元全有或全无模型。dynamic选项是一种回退到先前模型的便捷方式,并提供了更简单的迁移路径。
-
'auto'(默认):默认选项,尽可能多地缓存,而不阻止任何组件选择动态行为。 -
'force-dynamic':强制 动态渲染,这将导致路由在请求时为每个用户渲染。此选项等同于:- 将布局或页面中每个
fetch()请求的选项设置为{ cache: 'no-store', next: { revalidate: 0 } }。 - 将段配置设置为
export const fetchCache = 'force-no-store'
- 将布局或页面中每个
-
'error':强制静态渲染并缓存布局或页面的数据,如果任何组件使用 动态 API 或未缓存的数据,则会导致错误。此选项等同于:pages目录中的getStaticProps()。- 将布局或页面中每个
fetch()请求的选项设置为{ cache: 'force-cache' }。 - 将段配置设置为
fetchCache = 'only-cache'。
-
'force-static':强制静态渲染并缓存布局或页面的数据,方法是强制cookies、headers()和useSearchParams()返回空值。可以在使用force-static渲染的页面或布局中使用revalidate、revalidatePath或revalidateTag。
值得注意的是:
dynamicParams
控制访问未通过 generateStaticParams 生成的动态段时会发生什么。
export const dynamicParams = true // true | falsetrue(默认):未包含在generateStaticParams中的动态段会按需生成。false:未包含在generateStaticParams中的动态段将返回 404。
值得注意的是:
- 此选项替代了
pages目录中getStaticPaths的fallback: true | false | blocking选项。- 要在首次访问时静态渲染所有路径,你需要在
generateStaticParams中返回一个空数组或使用export const dynamic = 'force-static'。- 当
dynamicParams = true时,该段使用 流式服务器渲染。
revalidate
设置布局或页面的默认重新验证时间。此选项不会覆盖单个 fetch 请求设置的 revalidate 值。
export const revalidate = false
// false | 0 | numberfalse(默认):缓存任何将其cache选项设置为'force-cache'或在使用 动态 API 之前发现的fetch请求的默认启发式方法。语义上等同于revalidate: Infinity,这实际上意味着资源应该被无限期缓存。单个fetch请求仍然可以使用cache: 'no-store'或revalidate: 0来避免被缓存并使路由动态渲染。或者将revalidate设置为低于路由默认值的正数,以增加路由的重新验证频率。0:确保布局或页面始终动态渲染,即使没有发现动态 API 或未缓存的数据获取。此选项将未设置cache选项的fetch请求的默认值更改为'no-store',但保留选择'force-cache'或使用正数revalidate的fetch请求不变。number:(以秒为单位)将布局或页面的默认重新验证频率设置为n秒。
值得注意的是:
- revalidate 值需要是静态可分析的。例如
revalidate = 600是有效的,但revalidate = 60 * 10无效。- 使用
runtime = 'edge'时,revalidate 值不可用。- 在开发环境中,页面_始终_按需渲染且永远不会被缓存。这使你可以立即看到更改,而无需等待重新验证期结束。
重新验证频率
- 单个路由的每个布局和页面中最低的
revalidate将决定_整个_路由的重新验证频率。这确保子页面与其父布局一样频繁地重新验证。 - 单个
fetch请求可以设置低于路由默认revalidate的值,以增加整个路由的重新验证频率。这允许你根据某些条件动态选择对某些路由进行更频繁的重新验证。
fetchCache
这是一个高级选项,只有在你特别需要覆盖默认行为时才应使用。
默认情况下,Next.js 将缓存在使用任何 动态 API 之前可访问的任何 fetch() 请求,不会缓存在使用动态 API 之后发现的 fetch 请求。
fetchCache 允许你覆盖布局或页面中所有 fetch 请求的默认 cache 选项。
export const fetchCache = 'auto'
// 'auto' | 'default-cache' | 'only-cache'
// 'force-cache' | 'force-no-store' | 'default-no-store' | 'only-no-store''auto'(默认):在动态 API 之前使用它们提供的cache选项缓存fetch请求,并且不缓存动态 API 之后的fetch请求的默认选项。'default-cache':允许将任何cache选项传递给fetch,但如果未提供选项,则将cache选项设置为'force-cache'。这意味着即使动态 API 之后的fetch请求也被视为静态。'only-cache':通过将默认值更改为cache: 'force-cache'(如果未提供选项)来确保所有fetch请求选择缓存,并在任何fetch请求使用cache: 'no-store'时导致错误。'force-cache':通过将所有fetch请求的cache选项设置为'force-cache'来确保所有fetch请求选择缓存。'default-no-store':允许将任何cache选项传递给fetch,但如果未提供选项,则将cache选项设置为'no-store'。这意味着即使动态 API 之前的fetch请求也被视为动态。'only-no-store':通过将默认值更改为cache: 'no-store'(如果未提供选项)来确保所有fetch请求退出缓存,并在任何fetch请求使用cache: 'force-cache'时导致错误'force-no-store':通过将所有fetch请求的cache选项设置为'no-store'来确保所有fetch请求退出缓存。这会强制所有fetch请求在每次请求时重新获取,即使它们提供了'force-cache'选项。
跨路由段行为
- 单个路由的每个布局和页面中设置的任何选项都需要相互兼容。
- 如果同时提供
'only-cache'和'force-cache',则'force-cache'优先。如果同时提供'only-no-store'和'force-no-store',则'force-no-store'优先。force 选项会改变整个路由的行为,因此单个带有'force-*'的段将防止'only-*'导致的任何错误。 'only-*'和'force-*'选项的目的是保证整个路由要么完全静态,要么完全动态。这意味着:- 单个路由中不允许同时使用
'only-cache'和'only-no-store'。 - 单个路由中不允许同时使用
'force-cache'和'force-no-store'。
- 单个路由中不允许同时使用
- 如果子级提供
'auto'或'*-cache',父级不能提供'default-no-store',因为这可能使同一个 fetch 具有不同的行为。
- 如果同时提供
- 通常建议将共享的父布局保留为
'auto',并在子段分歧的地方自定义选项。
runtime
我们建议使用 Node.js 运行时来渲染你的应用程序。此选项不能在 Proxy 中使用。
值得注意的是:使用
runtime: 'edge'对于 Cache Components 是不支持的。
export const runtime = 'nodejs'
// 'nodejs' | 'edge''nodejs'(默认)'edge'
preferredRegion
export const preferredRegion = 'auto'
// 'auto' | 'global' | 'home' | ['iad1', 'sfo1']对 preferredRegion 的支持以及支持的区域取决于你的部署平台。
值得注意的是:
- 如果未指定
preferredRegion,它将继承最近的父布局的选项。- 根布局默认为
all区域。
maxDuration
默认情况下,Next.js 不限制服务器端逻辑的执行(渲染页面或处理 API)。
部署平台可以使用 Next.js 构建输出中的 maxDuration 来添加特定的执行限制。
注意:此设置需要 Next.js 13.4.10 或更高版本。
export const maxDuration = 5值得注意的是:
- 如果使用 Server Actions,请在页面级别设置
maxDuration以更改页面上使用的所有 Server Actions 的默认超时时间。
generateStaticParams
generateStaticParams 函数可以与动态路由段结合使用,以定义将在构建时静态生成而不是在请求时按需生成的路由段参数列表。
有关更多详细信息,请参阅 API 参考。