什么是SSR

是什么

Server-Side Rendering 我们称其为SSR，意为服务端渲染。
指由服务端完成页面的 HTML 结构拼接的页面处理技术，发送到浏览器，然后为其绑定状态与事件，成为完全可交互页面的过程。
先来看看Web3个阶段的发展史：

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

传统web开发： 网页内容在服务端渲染完成，⼀次性传输到浏览器，打开页面查看源码，浏览器拿到的是全部的dom结构

单页应用SPA： 单页应用优秀的用户体验，使其逐渐成为主流，页面内容由JS渲染出来，这种方式称为客户端渲染，打开页面查看源码，浏览器拿到的仅有宿主元素#app，并没有内容

服务端渲染SSR： SSR解决方案，后端渲染出完整的首屏的dom结构返回，前端拿到的内容包括首屏及完整spa结构，应用激活后依然按照spa方式运行

官方解释：

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

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

我们从上门解释得到以下结论：

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

解决了什么

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

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

但是使用SSR同样存在以下的缺点：

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

• 库的支持性，代码兼容

• 性能问题：

  • 每个请求都是n个实例的创建，不然会污染，消耗会变得很大
  • 缓存 node serve、 nginx判断当前用户有没有过期，如果没过期的话就缓存，用刚刚的结果。
  • 降级：监控cpu、内存占用过多，就spa，返回单个的壳

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

小结

• 使用ssr不存在单例模式，每次用户请求都会创建一个新的vue实例
• 实现ssr需要实现服务端首屏渲染和客户端激活
• 服务端异步获取数据asyncData可以分为首屏异步获取和切换组件获取
  • 首屏异步获取数据，在服务端预渲染的时候就应该已经完成
  • 切换组件通过mixin混入，在beforeMount钩子完成数据获取