Vue中的SSR 服务端渲染技术概述

SSR 

全称是 Server Side Render，是指一种传统的渲染方式，就是在浏览器请求页面URL的时候，服务端将我们需要的HTML文本组装好，并返回给浏览器，这个HTML文本被浏览器解析之后，不需要经过 JavaScript 脚本的执行，即可直接构建出希望的 DOM 树并展示到页面中。

SSR 有两种模式，单页面和非单页面模式，第一种是后端首次渲染的单页面应用，第二种是完全使用后端路由的后端模版渲染模式。他们区别在于使用后端路由的程度。

与之相对的是 CSR（Client Side Render），是一种目前流行的渲染方式，它依赖的是运行在客户端的JS，用户首次发送请求只能得到小部分的指引性HTML代码。第二次请求将会请求更多包含HTML字符串的JS文件。

为什么需要 SSR ？

目前前端流行的框架大都是适用于构建 SPA（单页面应用程序），在SPA这个模型中，是通过动态地重写页面的部分与用户交互，而避免了过多的数据交换，响应速度自然相对更高。

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

这时候，人们想着是不是可以将应用首页先加载出来，然后让首页用不到的其他 JS 文件再慢慢加载。但是由于 JS 引擎是单线程的，数据的组装过程会受到阻塞，单靠浏览器端的话不容易实现。

SSR 重新焕发活力的契机就在于此，如果将组装数据、渲染 HTML 页面的过程放在服务端，而浏览器端只负责显示接收到的 HTML 文件，那首屏的打开速度无疑会快很多。

SSR 的优缺点

那么，SSR 技术到底有哪些优点呢？我们来列举一下：

1. 更快的响应时间，相对于客户端渲染，服务端渲染在浏览器请求URL之后已经得到了一个带有数据的HTML文本，浏览器只需要解析HTML，直接构建DOM树就可以。
2. 有利于 SEO ，可以将 SEO 的关键信息直接在后台就渲染成 HTML，而保证搜索引擎的爬虫都能爬取到关键数据，然后在别人使用搜索引擎搜索相关的内容时，你的网页排行能靠得更前，这样你的流量就有越高。

以上是 SSR 技术最主要的两大优点，虽有优势，但缺点也不容忽视：

1. 相对于仅仅需要提供静态文件的服务器，SSR中使用的渲染程序自然会占用更多的CPU和内存资源。
2. 一些常用的浏览器API可能无法正常使用，比如window、docment和alert等，如果使用的话需要对运行的环境加以判断。
3. 开发调试会有一些麻烦，因为涉及了浏览器及服务器，对于SPA的一些组件的生命周期的管理会变得复杂。
4. 可能会由于某些因素导致服务器端渲染的结果与浏览器端的结果不一致。