Next.js 的 ISR 模式是什么？它有什么作用？

乐闻

2024年03月02日 08:00· 阅读 1473

前言

在当今的前端开发领域，我们经常会遇到一个词：SSG（静态站点生成）和 SSR（服务器端渲染）。Next.js 是一个流行的 React 框架，它支持这两种渲染模式，并在此基础上引入了一种名为 ISR（增量静态重新生成）的强大新特性。那么，ISR 究竟是什么？它具有什么样的作用？

ISR 的定义

ISR 模式是 Next.js 在 9.5 版本中引入的一项特性，全称是 Incremental Static Regeneration。它允许你在构建时生成静态页面，并按需更新它们，结合了 SSG 的优点和 SSR 的灵活性。

在 ISR 模式下，开发者可以为每个页面设置一个重新验证的时间。当用户访问该页面时，Next.js 会检查页面的生成时间。如果页面自上次构建以来还没达到重新验证的时间，Next.js 将服务该页面的静态版本。如果已经达到或超过了设定的时间，Next.js 会在后台重新生成页面，并更新静态文件。这个过程对用户来说是透明的，用户总是会立即看到页面的一个版本，要么是缓存版本，要么是新生成的版本。

ISR 的作用

ISR 的作用可以概括为以下几点：

1. 优化性能

ISR 通过为每个页面生成静态文件来提升性能。静态页面比动态页面快，因为它们是直接从 CDN 提供的，没有运行时的数据获取和模板渲染开销。

2. 实现即时更新

与传统的 SSG 不同，ISR 允许你在不重新构建整个站点的情况下更新内容。这意味着你可以以接近实时的方式更新页面，用户总能看到最新内容。

3. 降低服务器负载

因为页面是预先生成的，服务器不需要处理每次请求时的页面渲染，从而减轻了服务器的工作负担。

4. 提高可扩展性

由于静态文件可以很容易地分发到全球的 CDN，ISR 能够帮助网站更好地扩展，服务更多的用户。

如何使用 ISR

使用 ISR 非常简单，在你的 Next.js 页面组件中，你可以通过 getStaticProps 函数返回一个 revalidate 属性：

jsx
export async function getStaticProps(context) {
  // 获取数据
  const data = await fetchData();

  return {
    props: {
      data,
    },
    // 在此处设置页面重新验证的时间（秒）
    revalidate: 10, // 页面每10秒重新生成一次
  };
}

在上面的例子中，revalidate 设置为 10 秒，这意味着如果页面内容发生变化，最长将在 10 秒后，用户能够看到更新后的内容。

进阶：在 ISR 中处理数据更新

让我们再深入一点，看看如何在实际项目中处理数据更新。设想你正在运营一个新闻网站，新闻内容需要快速更新。使用 ISR，你可以保证用户访问时总是看到最新的内容。

示例代码：

jsx
// pages/news.js
import { fetchLatestNews } from '../lib/api';

export async function getStaticProps() {
  const news = await fetchLatestNews();

  return {
    props: {
      news,
    },
    // 假设新闻内容每小时更新一次
    revalidate: 3600, // 1小时
  };
}

export default function NewsPage({ news }) {
  return (
    <div>
      <h1>Latest News</h1>
      <ul>
        {news.map((article) => (
          <li key={article.id}>{article.title}</li>
        ))}
      </ul>
    </div>
  );
}

在这个例子中，尽管页面是静态生成的，但是每当有用户访问页面，并且页面内容过期时，Next.js 就会在后台重新拉取最新的新闻内容，并在下次请求时提供更新后的版本。这种机制保证了新闻网站的内容总是新鲜的，同时又没有牺牲加载速度。

总结

Next.js 的 ISR 模式为开发者提供了一个非常有力的工具，使得静态站点的构建既可以保持其固有的速度优势，又可以拥有动态站点的即时数据更新能力。在构建企业级应用、新闻网站、电子商务平台和更多依赖于实时数据更新的应用时，ISR 出色地平衡了性能和实用性。

要想完全掌握 ISR，你需要实践并理解 Next.js 的其他核心概念，比如页面渲染、数据获取以及 API 路由等。随着你对这些概念的深入理解，你会发现 ISR 只是构建现代高效 Web 应用的众多策略中的一员。

标签：

Next.js