这是我参与「第五届青训营」伴学笔记创作活动的第 3 天

一、什么是SSR

这里的SSR可不是我们打游戏中抽出的极品精灵，而是服务端渲染。

服务端渲染指的是在后台将vue页面进行渲染，生成HTML然后将HTML页面传递给浏览器。

二、传统的服务器端渲染

传统的服务器端渲染是客户端发请求给到服务器，然后服务器查询数据库，并拼接成html字符返回给客户端由客户端渲染。

缺点是在后续跳转其他链接时会不断地进行这种操作，导致不断的请求响应，会消耗大量的带宽资源，增加了请求时间。

单页应用SPA的页面内容由js渲染出来，这种方式称为客户端渲染。过程为：

1.客户端发送请求给服务器

2.服务器返回基本的结构（没有其他具体的dom结构）

3.客户端渲染html并执行js对模板template进行渲染，然后再向服务器发送请求具体的数据

4.服务器查询数据库返回数据

5.客户端渲染显示

这种方法的用户体验十分优秀，也是大部分的主流（比如react、vue、angular等框架都属于SPA），但是其在网速慢的时候的首屏等待时间让人抓狂；并且对seo（搜索引擎优化）不友好，因为爬虫只能拿到一个div，会认为是空页面，难以获得有效的页面信息。

优点：自不用说，最大的优点肯定是降低了首屏的等待时间，优化了用户体验；并且在许多场景下可以大幅度提升seo能力，从而提升其他的业务指标。

缺点：首先是因为在服务器端渲染，必然会增加服务器端的压力（不过这种压力在特定条件下可以规避），会占用更多服务器的资源，对服务器要求较高；并且开发受到更多的条件限制，因为SSR会导致无法应用一些外部的拓展库来完成需求，而且在开发的成本也会上升。