Next 12构建后调用getStaticPaths等方法及启动后执行函数方案咨询

方案1：增量静态再生（ISR）+ 启动后批量预缓存 #

这是最贴合你需求的方案——把页面生成环节从构建阶段转移到应用启动后，利用ISR的后台缓存能力完成批量页面生成。

实现步骤： #

1. 配置ISR规则：在页面的getStaticProps中设置revalidate参数（例如revalidate: 86400，表示一天后自动重新验证缓存），确保首次请求页面时会动态生成并缓存，后续请求直接复用缓存。
2. 编写启动后批量触发逻辑：
   • 如果用自定义服务器（比如Next.js的server.js），在服务器启动成功后调用批量请求脚本；也可以单独写一个Serverless接口，部署后手动/定时触发。
   • 必须做限流处理，避免一次性发起30万请求压垮服务器，比如用p-limit控制并发数（示例设为50）：

     const pLimit = require('p-limit');
     const limit = pLimit(50);
     
     // 替换为你的30万条路由数组
     const routesList = ['/page/1', '/page/2', ...];
     
     const generateCache = async () => {
       const promises = routesList.map(route => limit(() => 
         fetch(`https://your-app-domain${route}`, { method: 'HEAD' })
           .then(res => res.ok ? console.log(`缓存生成成功：${route}`) : console.error(`缓存生成失败：${route} ${res.status}`))
           .catch(err => console.error(`请求出错：${route}`, err))
       ));
       await Promise.all(promises);
     };
     
     // 服务器启动后执行
     app.listen(3000, () => {
       console.log('服务器启动完成');
       generateCache();
     });
     

方案2：动态路由+按需生成缓存 #

如果不需要预生成所有页面，完全让用户访问时触发缓存生成，能彻底规避构建阶段的压力。

实现步骤： #

1. 配置动态路由的 fallback 模式：在getStaticPaths中返回fallback: 'blocking'（以Next.js为例），这样未预生成的路由会在首次请求时动态生成并缓存，后续请求直接用缓存：

   export async function getStaticPaths() {
     return {
       paths: [], // 构建时不生成任何页面
       fallback: 'blocking',
     };
   }
   

2. 优化数据查询逻辑：在getStaticProps中确保数据查询高效，比如用数据库批量查询、缓存数据源，避免每个页面请求都做耗时查询。

方案3：构建时分批次生成页面 #

如果必须在构建阶段生成页面，可拆分路由分多次构建，再合并产物。

实现步骤： #

1. 拆分路由批次：把30万条路由分成若干批次（比如每批10万条）。
2. 添加批次构建命令：在package.json中设置不同批次的构建命令：

   "scripts": {
     "build:batch1": "NEXT_PUBLIC_BATCH=1 next build",
     "build:batch2": "NEXT_PUBLIC_BATCH=2 next build",
     "build:batch3": "NEXT_PUBLIC_BATCH=3 next build"
   }
   

3. 根据批次筛选路由：在getStaticPaths中读取环境变量，只生成当前批次的路由：

   export async function getStaticPaths() {
     const allRoutes = await getAllRoutes(); // 获取完整路由列表
     const batch = Number(process.env.NEXT_PUBLIC_BATCH);
     const batchSize = 100000;
     const start = (batch - 1) * batchSize;
     const end = start + batchSize;
     const paths = allRoutes.slice(start, end).map(slug => ({ params: { slug } }));
   
     return { paths, fallback: false };
   }
   

4. 合并构建产物：每次构建后，把.next/static目录下的页面缓存文件合并到同一个目录，最后部署合并后的产物。

内容的提问来源于stack exchange，提问作者eliezra236