服务端渲染（Server-Side Rendering，简称 SSR）是一种网页渲染技术，指的是在服务器端生成 HTML 内容，然后将其发送到客户端（浏览器）进行展示。与客户端渲染（Client-Side Rendering，简称 CSR）不同，SSR 将渲染页面的工作从客户端转移到了服务器端。
工作原理
- 客户端请求： 当用户请求访问一个网页时，客户端（浏览器）向服务器发送 HTTP 请求。
- 服务器渲染： 服务器接收到请求后，会运行相应的应用程序（如 React、Vue 等），并生成对应的 HTML 内容。
- 返回 HTML： 服务器将生成的 HTML 内容返回给客户端。
- 客户端显示： 浏览器接收到 HTML 内容后，直接展示给用户。此时，页面已经完全渲染，不需要额外的客户端 JavaScript 来生成页面内容。
优点
- 更快的首屏加载： 由于服务器直接返回了完整的 HTML 页面，浏览器可以立即显示内容，从而提高首屏加载速度，尤其是在网络较慢或设备性能较弱的情况下。
- 更好的 SEO： 搜索引擎爬虫在抓取网页内容时，往往更容易处理直接呈现的 HTML 页面，这有助于提高页面在搜索引擎中的排名。
- 适应性强： 对于一些需要在页面加载前就展示内容的应用，SSR 更具优势，例如新闻网站、博客等。
缺点
- 服务器压力大： 每次请求都需要服务器生成完整的 HTML 页面，增加了服务器的负担，特别是在高并发的情况下。
- 开发复杂度高： SSR 的应用需要在服务器端运行 JavaScript 代码，这增加了开发和调试的复杂度。
- 状态管理挑战： 在 SSR 中，管理客户端和服务器端共享的状态可能会变得复杂，尤其是在涉及用户交互和动态内容时。
SSR 与 CSR 的对比
- CSR（Client-Side Rendering）：页面在浏览器中通过 JavaScript 动态生成，首屏加载时间较长，但用户在页面上的后续操作会非常流畅。
- SSR（Server-Side Rendering）：页面在服务器端生成，首屏加载时间较短，适合 SEO 需求强烈的场景，但增加了服务器的负担。
常见的 SSR 框架
- Next.js：基于 React 的一个流行的 SSR 框架，提供了简便的 SSR 和静态生成支持。
- Nuxt.js：基于 Vue.js 的 SSR 框架，适用于快速构建服务端渲染的 Vue 应用。
- Angular Universal：Angular 的 SSR 实现，支持在 Angular 中使用服务端渲染。
使用场景
- 内容型网站：如博客、新闻网站，SSR 可以加快首屏加载，并提升 SEO 效果。
- 电商平台：商品页面的内容需要快速展示，同时需要良好的 SEO 支持。
- 多终端支持：当需要兼顾移动端和桌面端时，SSR 可以通过减少 JavaScript 的执行来提升移动设备上的性能。
SSR 在需要快速内容展示和搜索引擎优化的场景中非常有效，但需要考虑性能和开发复杂度之间的平衡。