在 Next.js 14 中,如果在静态生成(SSG)页面上使用了 revalidate 选项,那么这个页面就变成了增量静态生成(ISG)。
解释
- 静态生成(SSG): 在构建时生成 HTML 页面,这些页面在请求时直接从缓存中提供。默认情况下,这些页面不会更新,直到你重新构建应用。
- 增量静态生成(ISG): 在静态生成的基础上,允许你在运行时更新页面。通过设置 revalidate 选项,你可以指定一个时间间隔,Next.js 会在这个时间间隔后重新验证页面并更新缓存。这意味着页面可以在不重新构建整个应用的情况下更新。
示例
如果你在一个页面中使用了 revalidate,例如:
export const revalidate = 10; // 每 10 秒重新验证
这表示该页面会在每次请求后检查是否需要更新,如果超过 10 秒,Next.js 会重新生成该页面并更新缓存。这种方式使得页面能够保持相对新鲜,同时仍然利用静态生成的性能优势。
创建一个 API 路由来手动触发增量静态生成(ISG)页面的更新
在 pages/api 目录下创建一个新的文件,例如 revalidate.ts,并添加以下代码:
// pages/api/revalidate.ts
import type { NextApiRequest, NextApiResponse } from 'next';
export default async function handler(req: NextApiRequest, res: NextApiResponse) {
// 仅允许 POST 请求
if (req.method !== 'POST') {
return res.status(405).json({ message: 'Method not allowed' });
}
// 获取要重新验证的路径
const { path } = req.body;
if (!path) {
return res.status(400).json({ message: 'Path is required' });
}
try {
// 调用 Next.js 的 revalidate 方法
await res.revalidate(path);
return res.json({ message: `Revalidated ${path}` });
} catch (err) {
return res.status(500).send('Error revalidating');
}
}