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，返回单个的壳
服务器负载变大，相对于前后端分离服务器只需要提供静态资源来说，服务器负载更大，所以要慎重使用

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

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