NextJS中使用getStaticPaths如何定时检测拉取新增动态页面

你当前使用的getStaticPaths是Next.js框架下的静态预渲染能力，本身仅在项目构建阶段生成所有配置的动态页面静态资源，要实现定时检测新增页面的需求，可按照以下步骤操作： #

方案一：主动定时拉取校验（需要主动预渲染所有新增页面，无需等用户访问触发） #

• 先调整动态路由的getStaticPaths配置，将fallback参数设置为'blocking'，这样未预渲染的路径被访问时会自动生成静态页并缓存，不会返回404

export async function getStaticPaths() {
  // 构建阶段拉取全量路径
  const paths = await fetch('你的全量路径接口').then(res => res.json())
  return {
    paths: paths.map(item => ({ params: { slug: item.slug }})),
    fallback: 'blocking' // 未预渲染的路径首次访问时自动生成静态页
  }
}

• 新增一个API路由用于主动触发全量页面校验更新，示例代码如下（以Next.js的pages路由为例，app路由逻辑类似：

// pages/api/revalidate-all.js
export default async function handler(req, res) {
  // 必须加鉴权逻辑，避免接口被恶意调用
  if (req.headers['x-secret'] !== process.env.REVALIDATE_SECRET) {
    return res.status(401).end('无权限')
  }
  try {
    // 拉取最新全量页面路径
    const allPageSlugs = await fetch('你的后端/CMS全量路径查询接口').then(res => res.json())
    // 遍历所有路径主动触发重新校验，存在新增的页面自动生成静态页
    for (const slug of allPageSlugs) {
      await res.revalidate(`/动态路由前缀/${slug}`)
    }
    res.status(200).json({ success: true })
  } catch (e) {
    res.status(500).json({ success: false, msg: '校验更新失败' })
  }
}

• 配置定时任务，每隔你指定的时间间隔调用上述API接口即可：
  • 自行部署服务的可以用Linux crontab、node-schedule等工具配置定时任务
  • 用Vercel、Netlify等平台部署的可以直接用平台自带的Cron Jobs功能配置调用规则

方案二：增量静态再生（ISR，适合允许新增页面不需要提前预渲染，首次访问自动生成即可的场景 #

如果不需要主动预渲染所有新增页面，只需要在getStaticProps中配置revalidate参数即可，示例：

export async function getStaticProps() {
  const data = await fetch('你的页面数据接口')
  return {
    props: {
      data
    },
    revalidate: 60 // 单位秒，每隔60秒自动校验页面内容是否更新
  }
}

配合getStaticPaths的fallback: 'blocking'配置后，新增页面第一次被用户访问时会自动生成静态页，之后每隔指定时间自动更新内容，无需额外配置定时任务。 #

注意事项 #

• 全量拉取路径时如果数据量较大，建议做分页处理，避免单次请求超时
• 主动触发校验的API接口必须加鉴权逻辑，避免被恶意调用导致服务器压力过大

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