NextJS SSG能否无需ISR仅构建变更页面?静态页面跨构建缓存问询
Next.js 跨构建静态页面增量构建方案解答
核心结论
Next.js 官方默认不支持跨构建的静态页面缓存与增量构建,但可以通过自定义构建流程实现纯构建阶段的新增页面增量生成需求。
针对你的问题逐一说明
1. 默认构建是否支持跨缓存增量生成?
Next.js 的 next build 命令默认会全量重建静态页面,每次构建都会清理并重新生成 .next 输出目录,不会保留上一次构建的静态页面产物,因此原生不具备跨构建缓存复用已生成页面的能力。
2. 用 lastModified 筛选 getStaticPaths 路径的问题
你提到的通过 lastModified 在 getStaticPaths 中仅返回新增路径的方式,确实会导致旧页面丢失。因为 next build 只会根据当前 getStaticPaths 返回的路径列表生成页面,不在列表中的旧页面不会被包含在新构建的输出目录中,部署后旧页面将无法访问。
3. 纯构建阶段的增量新增页面解决方案
要实现仅构建新增页面并保留旧页面的需求,需要通过自定义构建脚本配合路径筛选来实现,具体步骤如下:
步骤1:缓存旧构建的静态页面产物
在执行新构建前,备份上一次构建生成的静态页面文件(通常在 .next/static/pages 目录,若使用 next export 则在 out 目录):
# 备份已生成的静态页面 mkdir -p .next/static_backup/pages cp -r .next/static/pages/* .next/static_backup/pages/
步骤2:动态生成仅包含新增路径的 getStaticPaths
在构建前,从你的内容源(数据库、CMS等)对比上次构建的路径记录,仅将新增的路径返回给 getStaticPaths,同时保持 fallback: false:
// pages/[slug].js export async function getStaticPaths() { // 从数据源获取所有内容路径,对比上次构建记录,仅保留新增路径 const allPaths = await fetchAllContentPaths(); const existingPaths = await getLastBuiltPaths(); // 从缓存/文件读取上次构建的路径 const newPaths = allPaths.filter(path => !existingPaths.includes(path)); return { paths: newPaths.map(slug => ({ params: { slug } })), fallback: false, }; }
步骤3:合并旧页面与新构建产物
执行新构建后,将备份的旧页面合并回新的输出目录:
# 执行新构建 next build # 合并备份的旧页面到新构建目录 cp -r .next/static_backup/pages/* .next/static/pages/
注意事项
- 确保构建环境能保留上次的构建产物(比如在CI/CD流程中缓存
.next/static_backup目录); - 若公共资源(如样式、静态文件)有更新,需评估是否需要重新构建所有页面,或通过哈希后缀(Next.js 默认支持静态资源哈希)避免旧页面引用过期资源;
- 需维护一个路径记录文件,用于对比每次构建的新增路径,比如构建完成后将本次生成的路径写入一个JSON文件,供下次构建读取。
内容的提问来源于stack exchange,提问作者user313724
相关产品推荐
相关产品推荐

