服务器端渲染 vs 静态站点生成 vs 增量静态再生

服务器端渲染

静态网站生成：

增量静态再生：

结论

服务器端渲染 (SSR) 和静态站点生成 (SSG) 是两种使用现代前端技术栈（从服务器 API 获取内容）创建网站，同时兼顾SEO 友好性和用户体验的方法。
最近，Next.js 的增量静态重生成 (ISR) 提供了一种介于前两种方法之间的混合方案，属于第三种。

在这里，我将阐述在下一个项目中选择 SSR、SSG 或 ISR 的理由，特别是对于React生态系统而言。

服务器端渲染

使用服务器端渲染 (SSR) 时，网站页面会在服务器端运行时生成
。 这意味着服务器必须能够执行 Node.js来生成页面。
其优点是页面始终保持最新状态，但每次页面浏览都会触发对 API 的调用。

优点：

• 内容始终保持最新
• 内容更改时无需触发网站重建

缺点：

• 无法部署到静态 CDN
• 由于每次请求的内容都是在服务器端生成的，因此首字节响应时间 (Time-To-First-Byte) 会稍慢一些。

如何应对缺点：

• 您始终可以在网站前端添加缓存层，例如具有较短 TTL 的 Varnish 服务器，以提高响应速度。
• Next.js（一个基于 React 的 SSR 框架）能够识别页面何时不需要数据（没有getInitialProps静态方法），并创建无需服务器端处理的纯静态页面。

静态网站生成：

使用静态网站生成 (SSG)，所有页面都会在构建时生成为静态页面（并运用一些 JavaScript 技巧来尽可能快速地加载/预加载内容）。这样可以获得最佳的首字节响应时间 (TTFB) ，并且您可以将网站托管在Netlify等静态网站托管平台上。

问题在于内容会过时，因此需要重建网站页面才能更新。Netlify或Zeit Now提供了钩子，可以从远程应用程序（例如 CMS）触发重建。

由于您只在构建时调用 API，因此每天调用它们的次数会更少，这样，如果您对 API 调用次数有限制，就不会有超出限制的风险。

React 生态系统中的主要 SSG 技术是Gatsby和Next.js（它们既可以进行 SSR 也可以进行 SSG）。

优点：

• 网站速度非常快
• 可以部署到静态 CDN
• 安全性：静态网站的攻击面极小。
• 减少 API 调用次数

缺点：

• 如果内容频繁变更，就可能变得陈旧过时。
• 需要触发重建以更新内容
• 如果你的网站规模非常大，那么搭建时间可能会很长。

如何应对缺点：

• 当您同时拥有稳定数据（例如电商平台上的产品描述、图片等）和频繁变化的数据（例如库存数量）时，您可以在组件加载时调用 API来获取频繁变化数据的更新版本。搜索引擎可能会抓取到过时的数据，但在这种情况下这并不是什么大问题。
• 利用这种技术，您还可以管理身份验证，并向不同的用户提供不同的内容。

增量静态再生：

ISR 是 Next.js 从 v9.5 开始引入的一种新范式。它结合了静态生成（响应时间非常快）和服务端渲染（新鲜数据，能够处理超过 10 万个页面）的优点。

它是如何运作的？

• Next.js 将对每个尚未静态生成的页面或已过时的页面进行服务器端渲染revalidate（您可以通过prop设置过时时间getStaticProps）。
• 当请求页面时，如果已经存在过时的静态页面，则立即提供该页面，并在后台在服务器上静态生成一个新的新鲜页面，以供下一个请求使用（过时但重新验证的缓存策略）。
• 如果没有生成静态页面，Next.js 会在服务器端生成静态页面并将其保存为静态页面，以便立即提供给下一个请求。
• 当 Next.js 首次需要进行 SSR 以生成页面时，您可以选择等待 SSR 完成（推荐），或者在加载数据时使用回退（带有加载指示器的骨架页面）。

示例策略

假设你有一个拥有 50,000 件商品的电商网站：你可以选择静态生成其中 2,000 件最畅销商品的页面（生成时间不会太长），这样它们就能始终快速加载。而其他商品的页面（“长尾商品”）在首次请求时响应速度会稍慢一些，之后每次请求都会静态生成页面。

优点：

• 网站速度非常快，因为大多数情况下用户看到的都是静态页面。
• 内容保持新鲜，因为您可以设置最长过期时间。
• 它也适用于非常大的网站（10万页或100万页）。

缺点：

• 对尚未静态生成的页面的首次请求可能需要一些时间。
• 经过一段时间的缓存过期后，在重新验证缓存的过程中，第一次请求可能仍然会获取到过期的内容。

结论

如今，我几乎任何时候都会选择静态网站，除非：

• 该网站规模非常大（例如，拥有 5 万件商品的电子商务网站）。
• 内容更新非常频繁，用户需要及时获取最新信息。

在这种情况下，我会选择 Next.js 的增量静态文件重新生成功能。

注意：我创建了一个名为React Bricks的基于 React 的可视化编辑内容管理系统 (CMS )，它支持所有开发策略（Next.js 的静态站点生成器 (SSG)，即将支持 Gatsby；Next.js 的服务器端渲染 (SSR) 或中断服务渲染 (ISR)）🚀
它对开发者（内容块以 React 组件的形式创建）和内容创作者（可视化编辑体验）都非常友好。我建议你完成包含游戏化元素的教程，并在推特上分享你的得分！😊