SSR

1. 是什么

Server-Side Rendering 称为 SSR，意为服务端渲染。

指由服务端完成页面的 HTML 结构拼接的页面处理技术，发送到浏览器，然后为其绑定状态与事件，成为完全可交互页面的过程。

先来看看 Web 3个阶段的发展史：

• 传统服务端渲染 SSR
• 单页面应用 SPA
• 服务端渲染 SSR

1.1 传统web开发

网页内容在服务端渲染完成，⼀次性传输到浏览器。

打开页面查看源码，浏览器拿到的是全部的 dom 结构。

1.2 单页应用SPA

单页应用优秀的用户体验，使其逐渐成为主流，页面内容由 JS 渲染出来，这种方式称为客户端渲染。

打开页面查看源码，浏览器拿到的仅有宿主元素 #app，并没有内容。

1.3 服务端渲染SSR

SSR 解决方案，后端渲染出完整的首屏的 dom 结构返回，前端拿到的内容包括首屏及完整 spa 结构，应用激活后依然按照 spa 方式运行。 看完前端发展，再看看 Vue 官方对 SSR 的解释：

Vue.js 是构建客户端应用程序的框架。默认情况下，可以在浏览器中输出 Vue 组件，进行生成 DOM 和操作 DOM。然而，也可以将同一个组件渲染为服务器端的 HTML 字符串，将它们直接发送到浏览器，最后将这些静态标记"激活"为客户端上完全可交互的应用程序。

服务器渲染的 Vue.js 应用程序也可以被认为是"同构"或"通用"，因为应用程序的大部分代码都可以在服务器和客户端上运行。

从上述解释得到以下结论：

• Vue SSR 是一个在 SPA 进行改良的服务端渲染
• 通过 Vue SSR 渲染的页面，需要在客户端激活才能实现交互
• Vue SSR 将包含两部分：服务端渲染的首屏，包含交互的 SPA

2. 解决了什么

SSR 主要解决了以下两种问题：

• seo：搜索引擎优先爬取页面 HTML 结构，*** 时，服务端生成了和业务相关联的 HTML，有利于 seo
• 首屏呈现渲染：用户无需等待页面所有 js 加载完成就可以看到页面视图（压力来到了服务器，所以需要权衡哪些用服务端渲染，哪些交给客户端）

但是*** 同样存在以下缺点：

• 复杂度：整个项目的复杂度

• 库的支持性，代码兼容

• 性能问题

  • 每个请求都是 n 个实例的创建，不然会污染，消耗会变得很大

  • 缓存 node serve、nginx 判断当前用户有没有过期，如果没过期的话就缓存，用刚刚的结果。

  • 降级：监控 cpu、内存占用过多，就 spa，返回单个的壳

• 服务器负载变大，相对于前后端分离服务器只需要提供静态资源来说，服务器负载更大，所以要慎重使用

所以在选择是否*** 前，需要慎重这些问题：

1. 需要 SEO 的页面是否只是少数几个，这些是否可以使用预渲染（Prerender SPA Plugin）实现
2. 首屏的请求响应逻辑是否复杂，数据返回是否大量且缓慢