增量静态再生 (ISR) 的隐藏潜力-js教程-PHP中文网

首页

web前端

js教程

增量静态再生 (ISR) 的隐藏潜力

Patricia Arquette

Oct 25, 2024 am 06:07 AM

1.什么是ISR？

ISR（增量静态再生）是 Next.js 引入的渲染策略，使您能够构建静态页面并在运行时增量更新它们。这种方法结合了两全其美的优点：

静态站点生成 (SSG) 的速度和 SEO 优势
服务器端渲染 (SSR) 的灵活性自动刷新内容。

The Hidden Potential of Incremental Static Regeneration (ISR)

在 ISR 中，HTML 在构建时预渲染，但在设定的重新验证间隔后，页面可以根据后续请求重新生成，无需完全重新部署。

2.何时使用 ISR？

ISR 最适合以下页面：

性能和 SEO 是首要任务。
内容会定期更改，但实时更新并不重要。
频繁重新部署是不切实际的。

The Hidden Potential of Incremental Static Regeneration (ISR)

示例：

博客：您希望搜索引擎为您的帖子建立索引，但不需要实时更新。
产品列表：产品每隔几个小时更改一次，但不需要立即更新。
文档：内容每隔几天或几周更新一次。

3. ISR 如何运作？

使用 ISR，页面仅在部署期间构建一次（如 SSG）。初始生成后，可以根据用户流量和重新验证间隔在运行时在后台重新生成页面。

The Hidden Potential of Incremental Static Regeneration (ISR)

ISR 流程概述：

用户请求页面，例如/blog。
- 如果页面存在且未过期，则提供缓存版本。
如果页面过期或丢失（基于重新验证时间），服务器会触发后台重新生成。
后续用户将收到现有页面，直到新版本准备就绪。
重新生成后，新内容将取代旧版本。

4.为什么要使用 ISR？

The Hidden Potential of Incremental Static Regeneration (ISR)

ISR 的优点：

性能：与静态页面一样，ISR 页面加载速度很快，因为它们是从边缘或缓存提供的。
SEO 优化： 预渲染页面确保良好的索引和 SEO 性能。
可扩展性：您无需在每次构建时重新生成每个页面，从而减少部署时间。
无需重新部署：内容更新而不触发重新部署。

5.使用 ISR 的最佳实践

The Hidden Potential of Incremental Static Regeneration (ISR)

选择合适的重新验证间隔：
- 中等动态内容的间隔较短（例如 60 秒）。
- 很少更改的内容的间隔较长（例如 24 小时）。
将 ISR 与客户端获取相结合：
- 使用客户端获取（例如useEffect）来获取动态内容，例如用户特定的数据，而静态ISR页面处理SEO友好的内容。
利用缓存策略：
- 确保边缘缓存或CDN集成以优化跨区域的页面交付。
优雅地处理后备状态：
- 使用后备：true 或后备：根据您希望如何在再生过程中管理丢失的内容进行阻止。

6.示例：在 Next.js 中实现 ISR

The Hidden Potential of Incremental Static Regeneration (ISR)

以下是如何使用 Next.js 在博客列表页面中使用 ISR：

代码示例：带有 ISR 的博客列表

import { GetStaticProps } from 'next';

export async function getStaticProps() {
  const res = await fetch('https://api.example.com/posts');
  const posts = await res.json();

  return {
    props: { posts },
    revalidate: 60, // Revalidate the page every 60 seconds
  };
}

export default function BlogList({ posts }) {
  return (
    <div>
      <h1>Blog Posts</h1>
      <ul>
        {posts.map((post) => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </div>
  );
}

登录后复制

说明：

revalidate: 60 确保页面每 60 秒在后台重新生成一次，确保列表保持最新状态而无需重新部署。

7. ISR 的风险和潜在问题

陈旧数据：
- 总有一个小时间窗口，用户可能会看到过时的内容。这取决于重新验证间隔和流量模式。
再生延迟：
- 页面按需重新生成，因此如果流量较低，内容更新可能需要更长的时间。
复杂的后备处理：
- 如果您使用fallback: true，用户可能会在构建页面时遇到加载状态，这可能会影响用户体验。
重新验证期间的错误处理：
- 如果在重新生成期间发生错误，它可能会提供过时的页面或回退到客户端获取。

The Hidden Potential of Incremental Static Regeneration (ISR)

如何降低风险：

对时间敏感的页面使用较短的重新验证间隔。
监控错误日志并针对重新验证期间的错误制定后备机制。
确保加载后备页面的骨架以改善用户体验。

8.比较：ISR、SSG、SSR、CSR

The Hidden Potential of Incremental Static Regeneration (ISR)

Rendering Strategy	Best Use Case	Performance	SEO	Content Freshness
SSG	Rarely changing content	Very Fast	Great	Stale until redeployed
ISR	Periodically changing content	Fast	Great	Fresh within interval
SSR	Frequently changing content	Slower	Good	Always fresh
CSR	User-specific content	Fast on load	Poor	Always fresh

渲染策略最佳用例性能搜索引擎优化内容新鲜度标题> SSG 很少更改内容非常快太棒了在重新部署之前已过时 ISR 定期更改内容快太棒了间隔内新鲜 SSR 经常更改的内容较慢好永远新鲜企业社会责任用户特定内容加载速度快差永远新鲜表>