Next.js如何实现增量/定向构建，缩短SSG组件更新后的构建时长

当你面临百万级SSG页面因组件变更需要全量构建的问题时，可以通过以下几种定向优化方式大幅缩短更新时长：

1. 按需静态再生（On-Demand ISR） #

这是Next.js官方提供的核心解决方案，无需全量构建，直接触发指定页面的静态内容更新。你可以通过编写API路由，调用res.revalidate()方法实现单页或批量页面的再生：

// pages/api/revalidate.js
export default async function handler(req, res) {
  // 验证请求合法性
  if (req.query.secret !== process.env.REVALIDATE_SECRET) {
    return res.status(401).json({ message: 'Invalid secret' });
  }

  try {
    // 单个页面再生
    await res.revalidate('/products/[id]');
    // 若需批量处理，可遍历页面路径列表逐一调用
    // for (const path of pagePaths) await res.revalidate(path);
    return res.json({ revalidated: true });
  } catch (err) {
    return res.status(500).send('Error revalidating');
  }
}

组件变更后，只需调用该API即可定向更新所有受影响的页面，避免全量构建的冗余操作。

2. 组件动态加载与缓存控制 #

将易变更的组件抽离为独立模块，使用next/dynamic动态导入，并通过缓存键控制更新时机：

import dynamic from 'next/dynamic';

// 为动态组件设置缓存键，组件变更时更新该键值
const DynamicFooter = dynamic(() => import('../components/Footer'), {
  ssr: true,
  cacheKey: process.env.FOOTER_CACHE_KEY,
});

当组件代码变更时，仅需更新环境变量FOOTER_CACHE_KEY，客户端就会自动拉取最新组件版本，无需重新生成静态页面。此方式适合对实时性要求不极高的场景。

3. 分层静态生成优化 #

将页面拆分为固定模板层和动态内容层：

• 动态内容层通过getStaticProps获取并缓存，数据不变时无需重新拉取
• 模板层负责页面结构渲染，变更时通过On-Demand ISR批量触发页面再生

由于Next.js会复用getStaticProps的缓存数据，再生过程仅需重新渲染模板部分，速度远快于全量构建。

4. 增量构建功能（Next.js 13+） #

开启Next.js的增量构建特性，它会缓存已构建的页面和组件依赖，仅重新构建受组件变更影响的页面：

// next.config.js
module.exports = {
  experimental: {
    incrementalCacheHandlerPath: require.resolve('./custom-cache-handler.js'),
  },
};

通过自定义缓存处理器，可进一步优化大规模页面的增量更新效率，避免无意义的重复构建。

内容的提问来源于stack exchange，提问作者S.Nishant