Next.js 按需静态再生

Question

我非常喜欢 Next.js 的增量静态再生。

但是，我正在寻找一种根据需要强制重新生成静态页面的方法。理想情况下，通过一个命令，当我的源数据库中的数据发生变化时，我可以通过 API 调用触发该命令。

这个想法是在每次数据更改后只重新生成每个页面一次。我可以通过在重新验证间隔后获取目标页面来强制执行 ISR 页面的重新生成，但我正在寻找一种方法，在数据更改之前不冗余地重新生成它们。

任何想法是否可行以及如何？:-)

Answer 1

编辑
Next.js 12.1 现在支持按需 ISR（测试版）

目前（Next.js 10.1.3）没有对此功能的本机支持，触发页面重新验证的唯一方法是使用基于间隔的 HTTP 请求。
然而，Next.js 团队正在探索按需（通过 API 路由触发）重新验证（另请参阅https://github.com/vercel/next.js/discussions/10721#discussioncomment-686），因为这是一个强烈要求的功能将来可能会出现。
在这里，您可以找到按需重新验证页面的尝试，但它有严重的警告，并且尚未准备好投入生产。

来源：通过事件超级增量静态再生
更新静态页面

Answer 2

On Demand ISR（更新内容而不重新部署）现在在 Next.js 12.2 版本On-Demand ISR（稳定）中稳定。

此功能允许您在构建时间后创建和更新静态页面到每页面级别，而无需删除整个页面进行重建。这对于动态内容非常有用，例如具有无头 CMS 的博客网站。

这是我在 Next.js 12.2 文档中找到的当前实现：

// pages/api/revalidate.js

export default async function handler(req, res) {
  // Check for secret to confirm this is a valid request
  if (req.query.secret !== process.env.MY_SECRET_TOKEN) {
    return res.status(401).json({ message: 'Invalid token' });
  }

  try {
    await res.revalidate('/path-to-revalidate');
    return res.json({ revalidated: true });
  } catch (err) {
    // If there was an error, Next.js will continue
    // to show the last successfully generated page
    return res.status(500).send('Error revalidating');
  }
}

这是一个现场演示，您可以在其中使用此功能：On Demand ISR Demo。

我发现 YouTube 上有用的一些视频链接。

Next.js 12.1：引入按需增量静态再生

Next.js 按需 ISR // 完整教程