使用getStaticProps时，无需重新构建如何从CMS获取更新数据？

Next.js的**增量静态再生（Incremental Static Regeneration，ISR）**完全匹配你的需求——既保留静态生成的性能优势，又能在无需全量重新构建的前提下更新特定页面数据。

具体实现方式 #

• 基础自动更新：在getStaticProps中添加revalidate字段，设置数据过期时间。当用户访问页面时，若数据已超过设定时间，Next.js会在后台静默重新生成页面，后续访问即可获取更新内容。
• 立即手动更新：结合按需ISR功能，通过API路由触发指定页面的重新生成，无需等待过期时间，适合你更新后立即生效的场景。

基础ISR示例代码 #

export async function getStaticProps() {
  // 从CMS拉取博客内容
  const res = await fetch('你的CMS接口地址');
  const posts = await res.json();

  return {
    props: {
      posts,
    },
    // 每86400秒（24小时）自动重新生成页面，可根据你的更新频率调整
    revalidate: 86400,
  };
}

按需ISR示例代码 #

1. 创建API路由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: '无效密钥' });
  }

  try {
    // 触发指定博客页面的重新生成
    await res.revalidate(`/posts/${req.query.slug}`);
    return res.json({ revalidated: true });
  } catch (err) {
    return res.status(500).send('重新生成失败');
  }
}

2. 在CMS后台配置Webhook，当博客内容更新时，调用上述API路由（传入文章slug和验证密钥），即可立即触发页面重新生成。

这种方案既不用全量重构项目，也避免了getServerSideProps每次请求都去CMS取数的性能损耗，完全适配你每月1-2次的更新频率。

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