服务端渲染SSR

服务端/客户端渲染

---

---

前言

目前的开发方式主要为前后端分离，前端主流框架有React和Vue，那么也就决定了渲染方式为客户端渲染（CSR）,但是CSR的缺点也比较明显，尤其是首屏渲染时间过长，影响用户使用体验。

---

一、客户端渲染(CSR)

客户端渲染：简称 CSR（Client Side Render)，浏览器端使用 JS 生产 HTML，并通过 JS 动态渲染页面内容，在 CSR 中，服务器通常只提供数据接口，而渲染逻辑由浏览器的 JS 执行

二、服务端渲染(SSR)

2.1 什么是服务端渲染

服务端渲染：简称 SSR（Server Side Reder)，浏览器请求页面 URL 的时候，服务端将需要的 HTML 文本组装好，并返回给浏览器，HTML 经过浏览器解析之后，不需要经过 JS 脚步的执行，即可以直接构建出希望的 DOM 树并展示到页面中

2.2 为什么需要服务端渲染

目前流行的框架大多适用于构建 SPA，在 SPA 这个模型中，是通过动态重写页面的部分与用户交互，而避免过多的数据交换，响应速度相对高

但是，SPA 应用首屏打开速度一般很慢，因为用户首次加载需要下载 SPA 框架及应用程序的代码，然后再下渲染页面，且 SPA 不利于 SEO 搜索引擎优化

2.3 SSR 优缺点

优点

• 更快的响应时间，相对于客户端渲染，服务端渲染在浏览器请求 URL 之后已经得到一个带有数据的 HTML 文本，浏览器只需要解析 HTML，直接构建 DOM 树即可
• 有利于 SEO，可以将 SEO 的关键信息直接在后台就渲染成 HTML，保证搜索引擎的爬虫能爬取到关键数据

缺点

• 相对于仅仅需要提供静态文件的服务器，SSR 中使用的渲染程序自然会占用更多的 CPU 和内存资源
• 开发难度增加，设计到浏览器及服务器，对于 SPA 一些组件的生命周期管理会变得复杂

三、SSR 与 CSR 比较

3.1 首次加载性能

• SSR：由于服务器端已经生成了 HTML，因此首次加载速度较快。用户可以快速看到页面内容。
• CSR：浏览器首先加载 HTML 和 JavaScript，然后再动态渲染页面内容，导致首次加载速度相对较慢。

3.2 SEO 友好性

• SSR：由于搜索引擎爬虫可以直接读取服务器端生成的 HTML，因此 SSR 对 SEO 较为友好，有利于搜索引擎收录。
• CSR：搜索引擎爬虫执行 JavaScript 较差，可能无法获得完整的页面内容，对 SEO 不太友好。

3.3 开发复杂性

• SSR：需要在服务器端进行 HTML 模板渲染，涉及到后端和前端的协作，对开发者的技能要求较高。
• CSR：前端开发者可以专注于 JavaScript 和交互逻辑，与后端解耦，降低了开发复杂性。

3.4 用户体验

• SSR：在首次加载后，页面切换速度较快，用户体验较好。
• CSR：页面切换通常需要等待 JavaScript 加载和执行，可能导致页面闪烁或白屏，体验稍差。

3.5 服务器负载

• SSR：服务器需要进行 HTML 渲染，每次请求都需要消耗一定的服务器计算资源。
• CSR：服务器只提供数据接口，不进行 HTML 渲染，可以减轻服务器负担。