除了 SSR、CSR 还有 ISR 和 SSG？五分钟搞懂它们的区别

在现代 Web 开发领域，经常会出现几个缩写词：SSR、CSR、ISR 和 SSG。这些术语对于理解 Web 应用程序的构建和交付方式至关重要。在本文中，我们将深入探讨这些缩写词的含义以及它们如何影响 Web 开发。

1.SSR（服务器端渲染）

「服务器端渲染」（SSR）是一种在服务器上渲染网页，然后将完全渲染的 HTML 页面发送到客户端浏览器的技术。它的工作原理如下：

当用户请求网页时，服务器会获取数据、生成 HTML，并将完整的页面发送到浏览器。
然后浏览器立即显示页面，同时下载并执行 JavaScript 和 CSS 文件。
SSR 以其 SEO 优势而闻名，因为搜索引擎可以轻松抓取 HTML 内容并为其建立索引。

2.CSR（客户端渲染）

「客户端渲染」（CSR）是一种将网页最初作为空 HTML shell 传递给浏览器的技术。然后，客户端 JavaScript 动态获取数据并在浏览器中呈现页面。企业社会责任的运作方式如下：

当用户请求页面时，服务器会发送最小的 HTML 结构以及 JavaScript 和 CSS 文件。
浏览器加载这些文件并执行 JavaScript，从而获取数据并生成内容。
CSR 提供了更具交互性的用户体验，但可能会导致初始页面加载速度变慢和 SEO 挑战。

3.ISR（增量静态再生）

「增量静态再生」（ISR）是一种结合了 SSR 和 SSG 优点的混合方法。它允许在构建时和运行时部分重新生成静态页面。ISR 的工作原理如下：

在构建过程中，某些页面被预呈现为静态 HTML，而其他页面则被标记为“过时”。
当用户请求“过时”页面时，服务器会即时重新生成该页面并缓存结果以供后续请求使用。
ISR在性能和实时数据之间取得了平衡，使其适合动态但经常访问的页面。

4.SSG（静态站点生成）

「静态站点生成」（SSG）是一种在构建时生成网页并用作纯 HTML 文件的技术。SSG 是最直接的方法：

在构建过程中，所有页面都预渲染为静态 HTML 文件，包括构建时已知的任何数据。
当用户请求页面时，服务器仅提供预先构建的 HTML 文件。

SSG 提供出色的性能、可扩展性和安全性，但可能不适合高度动态的内容。

何时使用每种方法

• 「SSR」：当 SEO 至关重要并且需要尽快向用户交付内容时，请使用 SSR。它非常适合内容驱动的网站和电子商务平台。

• 「CSR」：当您需要高度交互和动态的 Web 应用程序时，请考虑 CSR。它非常适合单页应用程序 (SPA) 和严重依赖用户交互的 Web 应用程序。

• 「ISR」：当您需要性能和实时数据更新之间的平衡时，选择 ISR。它适用于产品可用性不断变化的博客、新闻网站和电子商务网站。

• 「SSG」：当您的内容不经常更改且性能优先时，请选择 SSG。它非常适合博客、文档网站和营销页面。

结论

了解 SSR、CSR、ISR 和 SSG 对于在 Web 开发中做出明智的决策至关重要。每种方法都有其优点和缺点，选择取决于项目的具体要求。通过有效地利用这些技术，您可以创建提供最佳用户体验和性能的 Web 应用程序。

原文链接：

https://dev.to/dj1samsoe/understanding-ssr-csr-isr-and-ssg-a-comprehensive-guide-add

往期推荐

腾讯QQ 桌面版的内存优化探索与总结

每个前端都要学的【前端自动化部署】，Devops，CI/CD

一个写了3年半flutter的小伙，突然写了2个月uniapp的感悟！

最后

• 欢迎加我微信，拉你进技术群，长期交流学习...
  

• 欢迎关注「前端Q」,认真学前端，做个专业的技术人...

点个在看支持我吧