当前位置: 首页 > article >正文

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

http://www.kler.cn/a/291676.html

相关文章:

  • 香港站群服务器有助于提升网站在搜索引擎中的排名
  • esp32c3开发板通过micropython的mqtt库连MQTT物联网消息服务器
  • 【分布式技术】分布式缓存技术-旁路缓存模式(Cache Aside Pattern)
  • PG-DERN 解读:少样本学习、 双视角编码器、 关系图学习网络
  • SQL面试题——抖音SQL面试题 主播播出时长
  • 关于 Oracle Database Express Edition 的功能和安装
  • WebRTC协议下的视频汇聚融合技术:EasyCVR视频技术构建高效视频交互体验
  • python-Flask搭建简易登录界面
  • Java 7.3 - 分布式 id
  • linux——进程
  • v$session_longops监控 PDB clone 进度
  • Elasticsearch在高并发下如何保证读写一致性
  • Git创建项目
  • 一款云笔记支持在线协同文档,脑图,白板演示的工具,多个设备同步,让灵感与你同行(附源码)
  • 深度学习实战3--GAN:基础手写数字对抗生成
  • HarmonyOS开发实战( Beta5版)不要使用函数/方法作为复用组件的入参规范实践
  • 基于vue框架的车辆交易管理系统n5xwr(程序+源码+数据库+调试部署+开发环境)系统界面在最后面。
  • day17JS-Cookle、webStorage和Promise
  • Day22_K8S
  • 使用GPU加速及配置
  • UNION和UNION ALL的区别
  • 假如你是HR,你怎么招「游戏策划」?
  • 创建一个Oracle版本的JDK的Docker镜像
  • taro ui 小程序at-calendar日历组件自定义样式+选择范围日历崩溃处理
  • PyTorch常用库函数:torch.acos()的详解实战使用
  • 世界时钟怎么设置?一键设置多个世界时钟 多个地区时间