1、fallback: false
- 当设置
fallback
为 false 时,Next.js 只会预渲染在getStaticPaths
中提供的路径。如果用户尝试访问未生成的路径,将会返回 404 页面。 - 适用于所有可能的路径都已知且不会变化的情况。
return { paths, fallback: false };
2、fallback: true:
- 当设置为
true
时,如果用户访问一个未在getStaticPaths
中定义的路径,Next.js 将会尝试在后台生成这个页面。 - 首次访问这个页面时,用户将会看到一个空的页面或加载状态,直到页面生成完毕后再进行展示。生成的页面会被缓存,后续访问时将直接使用缓存的版本。
- 适合于路径不固定或需要根据动态内容进行生成的场景。
return { paths, fallback: true };
3、fallback: ‘blocking’:
- 与
true
类似,但在这种情况下,用户访问未预渲染的页面会被阻塞,直到页面生成完成。一旦生成完成,页面将被直接呈现给用户。 - 这种方式可以避免展示 loading 状态,用户看到的将始终是完整的页面。
- 适合用户体验要求高的场景。
综合来说,fallback 的设置决定了如何处理动态路由中未预定义的页面,选择哪一种方式取决于应用需求和用户体验的考虑。