Next.js 中的 SSR、SSG 和 ISR – 使用内容、原因和时间

题目：了解 Next.js 中的 SSR、SSG 和 ISR – 使用什么、为什么以及何时使用

如果您一直在探索 Next.js，您可能会遇到 SSR、SSG 和 ISR 等术语。这些是不同的渲染策略，可能会极大地影响应用的性能、SEO 和可扩展性。在这篇博客中，我们将深入探讨这些策略的含义、它们的工作原理以及何时使用它们。

1. SSR（服务器端渲染）

什么是 SSR？

SSR 代表服务器端渲染。在此策略中，页面的 HTML 在每次请求时在服务器上生成。这意味着用户始终获得最新的内容。

工作原理：

当用户访问页面时，Next.js 在服务器上运行函数 （） 来获取数据并呈现 HTML。然后将新生成的页面发送到浏览器。getServerSideProps

示例用例：

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

  return {
    props: { data },
  };
}

何时使用 SSR：

• 您的内容经常或实时更改。
• 您需要为每个页面请求提供最新数据。
• 您的页面依赖于特定于用户的数据（如用户控制面板或经过身份验证的内容）。
• SEO 很重要，内容必须始终是新鲜的。

2. SSG（静态站点生成）

什么是 SSG？

静态站点生成意味着您的 HTML 在构建时生成并作为静态文件提供。构建页面后，它将保持不变，直到您重新构建应用程序。

工作原理：

Next.js 用于在构建过程中获取数据。渲染的 HTML 被保存并从 CDN 提供给所有用户，使其速度非常快。getStaticProps

示例用例：

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

  return {
    props: { data },
  };
}

何时使用 SSG：

• 您的内容不会经常更改（例如，博客、文档、登录页面）。
• 您需要最快的页面加载时间。
• 您希望通过静态托管最大限度地提高可扩展性。
• SEO 很重要，您可以使用稍旧的数据。

3. ISR（增量静态再生）

什么是 ISR？

ISR 是 SSG 和 SSR 的混合体。它允许您在构建时构建静态页面，然后在后台定期重新生成它们，而无需重新构建整个站点。

运作方式：

页面的生成方式与 SSG 类似，但您可以设置间隔。在该间隔之后，下一个请求将在后台触发页面的重新生成。然后，将新更新的页面提供给未来的用户。revalidate

示例用例：

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

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

何时使用 ISR：

• 您的内容偶尔更新，但不是每秒更新一次。
• 您希望获得 SSG 的速度和更新的灵活性。
• 您正在从 WordPress、Strapi 或 Contentful 等 CMS 获取数据。
• 您希望在性能和数据新鲜度之间取得平衡。

快速比较

真实示例

• 使用来自 CMS 的内容的博客，例如 Strapi 或 Contentful → ISR
• SSG →很少更改的定价页面
• SSR →实时分析控制面板
• 新闻网站主页→ ISR 或 SSR，具体取决于更新频率

结论

Next.js 使您能够为每个页面选择最佳渲染方法。您不仅限于一个选项，还可以根据应用程序的需求将它们组合在一起。

回顾一下：

• 当内容高度动态和实时时，请使用 SSR。
• 当内容大部分是静态的并且性能是关键时，请使用 SSG。
• 当内容定期更改并且您希望避免完全重新生成时，请使用 ISR。

选择正确的策略可确保您的应用快速、可扩展且对 SEO 友好，从而为您的用户提供最佳体验。

出处：https://dev.to/