什么是SSR？
SSR是服务端渲染：在后台将vue实例渲染为HTML字符串直接返回，在前端激活为交互程序。
传统的服务端渲染
实现原理：
- 客户端发送请求给服务器
- 服务器查询数据库，使用视图、模板引擎等拼接成html字符串，返回给客户端
- 客户端渲染html
优点：
- 网页内容在服务器端渲染完成，一次性传输到浏览器，所以首屏加载速度非常快
- 有利于SEO，因为服务器返回的是一个完整的html，在浏览器可以看到完整的dom，对于爬虫、百度搜索等引擎就比较友好
缺点：
- 在后续跳转其它链接时，整个页面还要重复这样的操作，不断地请求响应、请求响应，相对来说，消耗的带宽资源、后续请求的时间就多了
单页应用SPA
单页应用其优秀的用户体验，使其逐渐成为主流，页面内容由js渲染出来，这种方式称为客户端渲染。它的过程是：
- 客户端发送请求给服务器
- 服务器返回html，但这时的html只有基本的结构（比如vue中，只有app这个div结构），没有其他具体的dom结构
- 客户端渲染html，渲染执行js（比如vuejs），渲染模板template，这时候会再向服务器发送请求，请求具体的数据
- 服务器查询数据库，返回对应的数据
- 客户端渲染显示
缺点：
- 网速很慢的时候，它的首屏等待时间较长
- SEO不友好，暴露给搜索引擎只有最基本的html结构(比如：<div id="app"></div>)
现在流行的服务端渲染SSR
它是传统的服务端渲染和单页应用的一种折中的解决方案：后端渲染出完整的dom结构返回，前端拿到的内容包括：首屏及完整spa结构，应用激活后依然按照spa方式运行，这种页面渲染方式被称为服务端渲染（server side render），它的过程是：
- 客户端发送请求给服务器
- 服务器读取模板，解析成dom节点，返回一个完整的首屏html结构
- 客户端进行首屏激活（把用户写的交互的代码，在前端激活，重新变成一个spa应用）
- 这样后续，用户再点击超链接、跳转时，不会再向服务器发送请求了，而是使用前端路由跳转，只会发送一些ajax请求数据
优点：
- SEO友好
- 首屏加载快
缺点：
- 开发逻辑复杂
- 开发条件限制：比如一些生命周期不能用，一些第三方库也可能不能用
- 服务器负载大
如何做技术选型？
- 是不是对SEO有要求？
- 是不是要求首屏快？
- 服务器负载是否能承受？
如果以上问题都是肯定的答案，那么可以考虑怎么做SSR：
-
对于已经存在SPA项目，要改造成SSR，可以优先考虑有没有替代方案：
- 需要SEO的页面是不是只有少数的几个营销页面，是否可以考虑使用预渲染来替代SSR
- 确实要做SSR改造的，可不可以利用服务器爬虫技术puppeteer来替代
- 实在不行了，考虑原生的SSR重构了
-
对于全新项目
- 可以使用nuxt.js来实现SSR
网友评论