Next.js按需静态再生

Question

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

然而，我正在寻找一种方法，强制静态页面再生的需求。理想情况下，通过一个命令，当我的源数据库中的数据更改时，我可以用API调用触发。

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

如果可行以及如何可行，有什么想法吗？：-(

Answer 1

编辑
Next.js 12.1现在支持按需ISR(Beta(

目前(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');
}
}

这里有一个现场演示，您可以使用此功能：随需应变ISR演示。

我在Youtube上发现了一些有用的视频链接。

Next.js 12.1：推出按需增量静态再生

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

Answer 3

Nextjs动态页面上的按需ISR

案例=博客页面/博客

单个博客=/blog/${slug}

// pages/api/revalidate.js
import axios from "axios";
export default async function handler(req, res) {
try {
// Check for secret to confirm this is a valid request
if (req.query.secret !== process.env.REVALIDATE_SECRET) {
return res.status(401).json({ message: "Invalid token" });
}
// Get all the blogs slugs
const blogs = await axios.get(
`${process.env.NEXT_PUBLIC_API_URL}/blogs`
);
const list= await blogs.data;
const slugs = list.map((one) => one.slug);
// Revalidate each page for each slug
for (const slug of slugs) {
await res.revalidate(`/blogs/${slug}`);
}
return res.status(200).json({ revalidated: true });
} catch (err) {
console.error(err);
return res.status(500).json({ message: "Error revalidating pages." });
}
}