SSR介绍-1: 什么是SSR？

什么是SSR？

SSR是服务端渲染：在后台将vue实例渲染为HTML字符串直接返回，在前端激活为交互程序。

传统的服务端渲染

实现原理：

1. 客户端发送请求给服务器
2. 服务器查询数据库，使用视图、模板引擎等拼接成html字符串，返回给客户端
3. 客户端渲染html

优点：

1. 网页内容在服务器端渲染完成，一次性传输到浏览器，所以首屏加载速度非常快
2. 有利于SEO，因为服务器返回的是一个完整的html，在浏览器可以看到完整的dom，对于爬虫、百度搜索等引擎就比较友好

缺点：

1. 在后续跳转其它链接时，整个页面还要重复这样的操作，不断地请求响应、请求响应，相对来说，消耗的带宽资源、后续请求的时间就多了

单页应用SPA

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

1. 客户端发送请求给服务器
2. 服务器返回html，但这时的html只有基本的结构（比如vue中，只有app这个div结构），没有其他具体的dom结构
3. 客户端渲染html，渲染执行js（比如vuejs），渲染模板template，这时候会再向服务器发送请求，请求具体的数据
4. 服务器查询数据库，返回对应的数据
5. 客户端渲染显示

缺点：

1. 网速很慢的时候，它的首屏等待时间较长
2. SEO不友好，暴露给搜索引擎只有最基本的html结构(比如：
   )

现在流行的服务端渲染SSR

它是传统的服务端渲染和单页应用的一种折中的解决方案：后端渲染出完整的dom结构返回，前端拿到的内容包括：首屏及完整spa结构，应用激活后依然按照spa方式运行，这种页面渲染方式被称为服务端渲染（server side render），它的过程是：

1. 客户端发送请求给服务器
2. 服务器读取模板，解析成dom节点，返回一个完整的首屏html结构
3. 客户端进行首屏激活（把用户写的交互的代码，在前端激活，重新变成一个spa应用）
4. 这样后续，用户再点击超链接、跳转时，不会再向服务器发送请求了，而是使用前端路由跳转，只会发送一些ajax请求数据

优点：

• SEO友好
• 首屏加载快

缺点：

• 开发逻辑复杂
• 开发条件限制：比如一些生命周期不能用，一些第三方库也可能不能用
• 服务器负载大

如何做技术选型？

1. 是不是对SEO有要求？
2. 是不是要求首屏快？
3. 服务器负载是否能承受？

如果以上问题都是肯定的答案，那么可以考虑怎么做SSR：

1. 对于已经存在SPA项目，要改造成SSR，可以优先考虑有没有替代方案：

   • 需要SEO的页面是不是只有少数的几个营销页面，是否可以考虑使用预渲染来替代SSR
   • 确实要做SSR改造的，可不可以利用服务器爬虫技术puppeteer来替代
   • 实在不行了，考虑原生的SSR重构了

2. 对于全新项目

   • 可以使用nuxt.js来实现SSR