javascript Next.js按需静态再生

0qx6xfy6  于 2023-04-19  发布在  Java
关注(0)|答案(3)|浏览(133)

我非常喜欢Next.js的Incremental Static Regeneration。
然而,我正在寻找一种方法来强制按需重新生成静态页面,理想情况下,当源数据库中的数据发生变化时,可以通过API调用触发一个命令。
这个想法是在每次数据更改后只重新生成一次每个页面。我可以通过在重新验证间隔后获取目标页面来强制ISR页面重新生成,但我正在寻找一种方法在数据更改之前不重复重新生成它们
有什么想法,如果它是可行的,如何?:-)

ars1skjm

ars1skjm1#

编辑

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),因为这是一个高度要求的功能,可能在未来可用。
Here您可以找到一个按需重新验证页面的尝试,但它有严重的警告,并且还没有准备好生产。
资料来源:
Update a static page by event
super Incremental Static Regeneration

cu6pst1q

cu6pst1q2#

按需ISR(更新内容而不重新部署)现在在Next.js 12.2版本中稳定
此功能允许您在构建时间后创建和更新静态页面,而无需关闭整个页面进行重建。这对于动态内容非常有用,例如使用无头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: Introducing On-Demand Incremental Static Regeneration
Next.js On-Demand ISR // Full tutorial

mw3dktmi

mw3dktmi3#

动态页面上的按需ISR
Case = blogs page on /blogs
单个博客= /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." });
  }
}

相关问题