一文搞懂：什么是SSR、SSG、CSR？

SSR、SSG 和 CSR 是前端渲染中的三种常见技术，它们各自代表着不同的数据获取和页面渲染方式。了解这三者的区别和适用场景，对开发高效的 Web 应用非常重要。接下来我们逐一解析这三种技术：

SSR（Server-Side Rendering，服务器端渲染）

定义：

SSR 是指在服务器上生成 HTML 页面，然后将其发送到客户端（浏览器）。简单来说，用户访问页面时，服务器会直接生成并返回完整的 HTML，浏览器只需展示这些内容。这样做的好处是页面在用户访问时能够更快地显示出来，尤其是对于 SEO（搜索引擎优化）和首次加载性能非常友好。

流程：

• 用户发起请求。
• 服务器根据请求，动态生成 HTML 内容。
• 服务器返回 HTML 页面给客户端。
• 客户端接收并渲染页面。

优缺点：

• 优点：
  • 更好的 SEO，因为搜索引擎爬虫可以直接抓取 HTML 内容。
  • 首屏加载更快，用户可以更早看到页面内容。
• 缺点：
  • 服务器压力大，尤其是流量较高时，每次用户请求都需要重新渲染页面。
  • 页面交互性能较低，因为页面完全由服务器渲染，客户端要等待 JavaScript 加载和执行后才会有交互。

适用场景：

• 适用于 SEO 要求高的场景，如博客、新闻网站等。
• 用户首次访问页面时对渲染速度要求较高。

SSG（Static Site Generation，静态站点生成）

定义：

SSG 是一种在构建时就将页面生成好（静态化），然后通过 CDN 或静态服务器提供给客户端的渲染方式。与 SSR 不同，SSG 并不依赖于每个用户请求时动态生成 HTML 页面，而是在构建时就已经将所有的 HTML 文件生成好，客户端只需加载已生成的静态页面。

流程：

• 在构建时（通常是项目的构建过程中），生成所有页面的静态 HTML。
• 这些静态页面会被托管到 CDN 或静态文件服务器。
• 用户访问时，直接从 CDN 或静态服务器获取并渲染页面。

优缺点：

• 优点：
  • 非常高效，因为所有的页面都是静态的，不需要依赖服务器来渲染。
  • 几乎没有服务器负担，适合高并发的场景。
  • 更快的页面加载，因为可以通过 CDN 提供快速访问。
• 缺点：
  • 适用于内容更新较少的场景。内容需要频繁更新的网站可能不适合使用 SSG，因为每次更新都需要重新构建和部署。
  • 不适用于高度动态的数据展示。

适用场景：

• 博客、文档、营销网站等内容相对静态的站点。
• 对 SEO 有较高要求，且页面内容不需要实时更新的场景。

CSR（Client-Side Rendering，客户端渲染）

定义：

CSR 是指浏览器在客户端通过 JavaScript 来渲染页面。服务器返回的是一个空的 HTML 框架，JavaScript 在浏览器中执行，通过接口获取数据，然后渲染页面。也就是页面内容由客户端动态生成。

流程：

• 用户发起请求，服务器返回一个包含 JavaScript 代码的空 HTML 页面。
• 浏览器加载并执行 JavaScript，向 API 请求数据。
• 接收数据后，浏览器动态渲染页面。

优缺点：

• 优点：
  • 高度的交互性，适合开发单页应用（SPA）。
  • 服务器负担较轻，页面渲染逻辑全部由客户端承担。
  • 页面交互响应速度快，用户体验较好。
• 缺点：
  • 首次加载时间较长，因为浏览器需要加载 JavaScript 文件、获取数据并渲染页面。
  • SEO 不友好，搜索引擎爬虫可能无法正确抓取页面内容，除非做额外的配置（例如服务器端渲染或使用预渲染技术）。
  • 对浏览器性能要求较高，低性能设备可能加载慢。

适用场景：

• 适合单页应用（SPA）或数据动态变化较多的应用。
• 不太关注 SEO，更多注重用户体验和交互性的场景。

总结

• SSR：服务器端渲染，适合需要 SEO 和快速首次加载的应用，但服务器负担较重。
• SSG：静态站点生成，适合内容不常变化、需要极高性能的站点，服务器负担小，CDN 提供极速访问。
• CSR：客户端渲染，适合需要丰富交互的单页应用，服务器负担轻，但首次加载慢，SEO 可能不理想。

在实际开发中，选择哪种渲染方式要根据项目的具体需求来决定，甚至有些框架（如 Next.js）允许你混合使用这些渲染方式，以达到最佳的性能和用户体验。