CSR、SSR、SSG 和 ISR 的直观解释和比较

你好呀，

Next.js是一个非常流行的 React 框架，其中一个很棒的功能是能够使用不同的渲染技术构建 Web 应用程序，例如

• CSR - 客户端渲染
• SSR——服务器端渲染
• SSG - 静态站点生成
• ISR——增量静态再生

在这篇文章中，我将重点使用可视化图表和最少的文本来解释和比较这些技术，我的目标是创建一个简短的注释，以便您在需要时可以快速参考。

话虽如此，这篇文章并不涵盖您作为 Web 开发人员可能想要学习的高级技术细节和代码片段。

让我们开始吧..！

客户端渲染

这是大多数 Web 框架（例如 Angular 和 React）开箱即用的支持。这通常适用于单页应用程序 (SPA)、具有大量用户交互（例如游戏）和高度动态内容（例如表单和聊天应用程序）的应用程序。

基本上，Web 浏览器会首先加载一个空的 HTML 文件。之后加载的 JavaScript 和样式负责在 Web 浏览器中呈现完整的用户友好页面。

服务器端渲染

CSR 的主要缺点是它不支持搜索引擎优化。因此，大多数 Web 框架也提供了在服务器端渲染页面的功能。

与 CSR 应用不同，每个页面都会向应用服务器发起请求，应用服务器会动态渲染并提供该页面的完整 HTML 内容。由于每次用户请求时，应用服务器都会请求并渲染页面，因此页面服务时间比 CSR 应用更长。

静态站点生成

为了避免在每个请求中进行渲染，我们为什么不在构建时生成这些文件，以便我们可以在用户请求时立即提供页面。

如果您想构建一个像博客一样充满静态内容的 Web 应用程序，这项技术会非常有用。但它的一个缺点是内容可能已经过时，每次更改内容时都需要重新构建和部署应用程序。（在 CMS 中）

增量静态再生

ISR 是 SSG 的下一个改进，它会定期构建和重新验证新页面，以确保内容不会过时。

比较

为了比较这四种技术，我们将考虑以下指标。

• 构建时间——值越低越好。
• 适用于动态内容- 如果该值较高，则该技术更适合具有大量动态内容的应用程序。
• 搜索引擎优化——大多数情况下，最好对 SEO 有一个良好的评价。
• 页面服务/渲染时间- 在 Web 浏览器中渲染完整页面所需的时间。值越小越好。
• 最新内容- 表示始终提供最新内容。数值越高越好。
• 静态服务器/应用服务器- 这项技术需要静态服务器还是应用服务器？通常情况下，静态服务器比应用服务器消耗的资源少得多。

一些关键的想法是

• 与 SSR 相比，CSR 的页面服务/渲染时间更短，因为在初始资源加载完成后，CSR 能够非常快速地加载其余页面。但在 SSR 中，每个页面请求都将由应用服务器处理。

• 与 SSG 相比，ISR 中的页面服务/渲染时间更多，因为 ISR 会定期从服务器请求更新的页面。

• ISR 没有最新的内容，因为在定期内容刷新之前，可能会有一个小窗口让用户获取过时的内容。

请注意，由于您持有不同的观点，此比较可能并不准确。也欢迎您随时指正。

结论

在 Highlevel 中，我们可以根据应用程序的动态交互级别将这些渲染技术分为两大类。

• CSR 和 SSR 可用于开发高度动态的 Web 应用程序，并且根据场景的不同，两者各有优缺点。
• 如果您拥有高度静态的内容，则可以使用 SSG 或 ISR。ISR 更先进、更优化，但需要特定平台才能运行。

❤️感谢您的反馈，非常感谢您的阅读。