Skip to content

Next.js 原理与运行时

Next.js 动态路由和 generateStaticParams 如何协同?

高级回答要说明哪些参数在构建时生成、哪些在请求时补齐,以及未知参数如何处理。

适合阶段:资深前端 / 原理面核心能力:Dynamic Segment · SSG · Fallback

面试官想考什么

  • generateStaticParams 什么时候执行? 考察构建时和运行时边界。
  • 未生成的参数会怎样? 考察 dynamicParams 与 404 语义。
  • 数据源有百万条记录怎么办? 考察静态生成规模治理。
  • 参数页如何和缓存、revalidate 配合? 考察渲染策略。

一句话回答

text
generateStaticParams 用于预先生成有限的动态路由参数,未预生成参数是否在请求时生成由 dynamicParams 决定;它不是全量数据同步方案,规模、更新频率和缓存失效必须一起设计。

面试回答详解

1. 基本链路

text
参数数据 -> generateStaticParams -> 构建/预生成部分页面
-> 未命中参数 -> 请求时生成或 notFound

它适合热门详情页、有限分类和稳定内容,不适合把海量动态数据全部塞进构建流程。

2. dynamicParams 边界

  • true:未在 generateStaticParams 返回的参数可以在请求时处理。
  • false:未生成参数直接进入 404。
  • 实际行为还要结合页面是否动态、数据缓存和部署模式验证。

不要用前端路由存在来推断服务端资源一定存在。

3. 构建成本

参数数量会放大构建时间、内存、产物和部署成本。可以只生成高热度参数,其余请求时生成或改用动态渲染;也可以通过分页、按区域构建和增量策略控制规模。

4. 数据更新

静态页面更新后需要 revalidate 或按资源 tag 失效。若页面包含权限、库存或个性化信息,不应因为路径是动态的就静态化。

5. 生产验证

测试首次请求、重复请求、未知参数、构建后新增参数、数据删除和缓存失效。观测构建耗时、参数命中率、动态生成比例、404 率和缓存命中。

可直接背诵的 30 秒回答

text
generateStaticParams 是构建时预生成动态路由的一种方式,不是把所有数据都静态化。项目中我会只预生成高价值或有限参数,未生成参数由 dynamicParams 决定是请求时生成还是 404。还要结合数据更新、revalidate、权限和构建成本验证,避免海量参数导致构建失控或动态数据被缓存。

扩展知识

参数页面的决策

text
稳定公共内容 -> 预生成
长尾公共内容 -> 请求时生成/缓存
用户或权限数据 -> 动态读取

面试官追问链

追问一:generateStaticParams 能读取数据库吗?

  • 考察点:构建依赖。
  • 回答方向:可以,但要考虑构建环境凭证、网络稳定性、数据规模和可重复构建,不应依赖不可控的实时服务。

追问二:新增一条数据后必须重新 build 吗?

  • 考察点:增量生成理解。
  • 回答方向:不一定,可用请求时生成和 revalidation;具体取决于页面配置和部署平台能力。

追问三:为什么返回 404 仍然可能有缓存影响?

  • 考察点:缓存语义。
  • 回答方向:404 也可能被缓存,需要设置合理 TTL 和失效策略,资源后来创建时要确保旧 404 不长期存在。

推荐阅读

基于 MIT 协议开源