SSG页面加上了 revalidate,是不是就变成了 ISG?

在 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');  
  }  
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值