Route Segment Config 3个月前

编程语言
849
Route Segment Config

Route Segment 选项允许您通过直接导出以下变量来配置 页面布局路由处理程序 的行为:

选项 类型 默认值
experimental_ppr 'true' | 'false'
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 由部署平台设定

选项

experimental_ppr

为布局或页面启用部分预渲染(PPR)

// layout.tsx | page.tsx
export const experimental_ppr = true // true | false

dynamic

将布局或页面的动态行为更改为完全静态或完全动态。

// layout.tsx | page.tsx | route.ts
export const dynamic = 'auto' // 'auto' | 'force-dynamic' | 'error' | 'force-static'

需要了解app 目录中的新模型倾向于在 fetch 请求级别进行细粒度的缓存控制,而不是 pages 目录中 getServerSidePropsgetStaticProps 的二元全有或全无模型。dynamic 选项是一种方便的回归到以前模型的方法,并提供了更简单的迁移路径。

  • **'auto'**(默认):默认选项尽可能多地缓存,而不会阻止任何组件选择动态行为。
  • **'force-dynamic'**:强制动态渲染,这将导致每个用户在请求时渲染路由。此选项等效于:
    • pages 目录中的 getServerSideProps()
    • 在布局或页面中的每个 fetch() 请求中设置选项 { cache: 'no-store', next: { revalidate: 0 } }
    • 将段配置设置为 export const fetchCache = 'force-no-store'
  • **'error'**:强制静态渲染并通过在任何组件使用动态函数或未缓存数据时触发错误来缓存布局或页面的数据。此选项等效于:
    • pages 目录中的 getStaticProps()
    • 在布局或页面中的每个 fetch() 请求中设置选项 { cache: 'force-cache' }
    • 将段配置设置为 fetchCache = 'only-cache',dynamicParams = false
    • dynamic = 'error' 会将 dynamicParams 的默认值从 true 更改为 false。您可以通过手动设置 dynamicParams = true 来重新选择动态渲染由 generateStaticParams 生成的动态参数的页面。
  • **'force-static'**:通过强制cookies()headers()useSearchParams() 返回空值来强制静态渲染并缓存布局或页面的数据。

需要了解

dynamicParams

控制当访问动态段但未使用 generateStaticParams 生成时的行为。

// layout.tsx | page.tsx
export const dynamicParams = true // true | false,
  • **true**(默认):不包含在 generateStaticParams 中的动态段将按需生成。
  • **false**:不包含在 generateStaticParams 中的动态段将返回 404。

需要了解

  • 此选项取代了 pages 目录中 getStaticPathsfallback: true | false | blocking 选项。
  • 要在首次访问时静态渲染所有路径,您需要在 generateStaticParams 中返回一个空数组或使用 export const dynamic = 'force-static'
  • dynamicParams = true 时,段使用流式服务器渲染
  • 如果使用 dynamic = 'error'dynamic = 'force-static',它将把 dynamicParams 的默认值更改为 false

revalidate

设置布局或页面的默认重新验证时间。此选项不会覆盖单个 fetch 请求设置的 revalidate 值。

// layout.tsx | page.tsx | route.ts
export const revalidate = false // false | 0 | number
  • **false**(默认):默认启发式是缓存任何将其 cache 选项设置为 'force-cache' 或在使用动态函数之前发现的 fetch 请求。语义上等效于 revalidate: Infinity,这实际上意味着资源应无限期缓存。仍然可以通过单个 fetch 请求使用 cache: 'no-store'revalidate: 0 避免缓存并使路由动态渲染。或者将 revalidate 设置为比路由默认值低的正数,以增加路由的重新验证频率。
  • **0**:确保即使没有发现动态函数或未缓存的数据获取,也始终动态渲染布局或页面。此选项会更改未设置 cache 选项的 fetch 请求的默认值为 'no-store',但不会更改选择 'force-cache' 或使用正 revalidate 的 `fetch
image
EchoEcho官方
无论前方如何,请不要后悔与我相遇。
1377
发布数
439
关注者
2223520
累计阅读

热门教程文档

Maven
5小节
爬虫
6小节
10.x
88小节
Vue
25小节
MyBatis
19小节