Next.js 15 中的增量静态再生（ISR）：开发人员指南

# Web 开发 # 编程 # 前端开发 # nextjs

想象一下，您正在构建一个包含数千种产品的电子商务平台。您希望静态站点生成 (SSG) 的闪电般快速加载时间能够带来更好的 SEO 和用户体验，但您的产品详细信息和库存经常发生变化。如何在速度和保持内容新鲜之间取得适当的平衡？使用**增量静态再生 (ISR)**，借助 Next.js 15，情况会变得更好。

在本博客中，我们将探讨 ISR 的概念，介绍其工作原理，并深入研究 Next.js 15 中影响深远的更新，这些更新改变了开发人员处理代码的方式。为了使事情更实用，我们将遵循构建产品列表页面的单个示例。

什么是 ISR？

ISR 允许您**逐步**更新静态页面，而无需重建整个网站。这意味着您可以享受静态页面的性能优势，同时保持内容的新鲜度。页面会在定义的时间间隔或满足特定触发器时在后台重新生成。

主要优点：

可扩展性：无需为了小更新而重建整个站点。

性能：用户仍然可以获得静态页面的速度。

灵活性：更新在后台自动进行。

Next.js 中的增量静态再生 (ISR) 工作流程

上图说明了 Next.js 中 ISR 的工作流程。它展示了如何提供静态页面、在后台重新生成并重新验证以确保内容新鲜。

让我们一起构建：使用 ISR 列出产品清单

为了理解 ISR，我们将为电子商务网站构建一个产品列表页面。以下是它逐步演变的过程：

步骤 1：设置静态生成

首先，我们使用静态站点生成 (SSG) 创建产品列表页面。该页面在构建期间获取数据并保持静态。

// pages/products.js
import { getProducts } from '../lib/api';

export async function getStaticProps() {
  const products = await getProducts();

  return {
    props: {
      products,
    },
  };
}

export default function Products({ products }) {
  return (
    
      Product Listings
      
        {products.map((product) => (
          {product.name}
        ))}
      
    
  );
}

对于固定的产品组合，这种方法非常有效，但如果我们频繁添加新产品或更新现有产品，该怎么办？用户将看到过时的数据，直到我们重建网站。这就是 ISR 发挥作用的地方。

第 2 步：引入 ISR

使用 ISR，我们可以指定静态页面在后台重新生成的频率。让我们在产品列表页面中添加一个重新验证期。

export async function getStaticProps() {
  const products = await getProducts();

  return {
    props: {
      products,
    },
    revalidate: 60, // Regenerate the page every 60 seconds
  };
}

现在，页面每 60 秒重新生成一次。如果您在数据库中添加或更新产品，用户将在重新验证期后看到更改，而无需重建整个网站。

Next.js 15 中针对 ISR 有哪些新功能？

Next.js 15 引入了多项更新，使 ISR 更加强大和高效：

1. 使用 API 控制进行动态重新验证

在以前的版本中，ISR 重新验证严格基于时间。使用 Next.js 15，您可以通过 API 以编程方式触发重新验证。这意味着开发人员可以在发生特定事件（例如更新数据库中的产品）时重新生成页面。

**示例：按需重新验证**

export default async function handler(req, res) {
  if (req.method === 'POST') {
    await res.revalidate('/products'); // Revalidate the product listing page
    res.status(200).json({ message: 'Revalidated!' });
  } else {
    res.status(405).json({ message: 'Method not allowed' });
  }
}

2.优化缓存失效

Next.js 15 优化了缓存失效，确保高效替换陈旧页面，而不会影响其他静态页面。开发人员现在可以更好地控制需要重新生成哪些页面。

步骤 3：使用动态重新验证更新示例

假设您有一个管理仪表板，可以在其中添加或编辑产品。您可以挂接 Next.js 重新验证 API，以在更改后立即触发更新。

// Trigger revalidation from your admin dashboard
const handleUpdate = async () => {
  await fetch('/api/revalidate', {
    method: 'POST',
  });
  alert('Page revalidated successfully!');
};

// Button in your admin panel

通过此设置，每当添加或编辑新产品时，您的产品列表页面几乎会立即更新，为用户提供两全其美的效果：速度和新鲜度。

开发人员观点：更新如何改变您的工作流程

Next.js 15 中的更新使 ISR 更加灵活且对开发人员更友好。以下是它们如何影响您的代码：

从基于时间到事件驱动：您不再局限于定期重新验证。您现在可以动态重新验证页面，让您的代码对变化的响应更快。

降低构建复杂性：通过优化缓存失效，您无需担心重新生成页面时出现意外的副作用。

API-First 方法：重新验证 API 与现代事件驱动架构完美契合，允许与 webhook 和其他实时系统无缝集成。

何时使用 ISR

ISR 非常适合内容需要保持新鲜但不需要实时更新的场景，例如：

电子商务平台（例如产品列表和类别）

博客或新闻网站

经常更新的营销页面

结论

Next.js 15 中的增量静态再生功能对于构建可扩展、高性能应用程序的开发人员来说是一个重大改变。通过将静态生成的优势与按需更新的灵活性相结合，ISR 可帮助您为用户提供最佳体验。

无论您是构建电子商务网站、博客还是营销平台，Next.js 15 中的新功能都可以让您比以往更轻松地保持内容新鲜，而不会牺牲速度或可扩展性。

CLIS.CC