SSR服务端渲染流程分析

概念

放在浏览器进行就是浏览器渲染,放在服务器进行就是服务器渲染。

• SPA(单页面应用)属于浏览器渲染：前端通过webpack打包，在模板(html文件)中引用打包好的js文件，然后通过浏览器解析渲染到到页面中。(也就是html文件默认只是空标签，只有当js加载完成后之后才会生成内容)
• 服务端渲染：通过服务器把渲染那好的结果吐给浏览器

SSR优缺点：

• 客户端渲染不利于SEO搜索引擎优化(因为相对于服务端是异步渲染出来的,搜索引擎的爬虫无法抓取)
• 服务端渲染是可以被爬虫抓取到的，客户端异步渲染是很难被爬虫抓取到的
• SSR直接将HTML字符串传递给浏览器。大大加快了首屏加载时间。
• SSR占用更多的CPU和内存资源
• 一些常用的浏览器API可能无法正常使用,比如操作DOM的API(因为服务端没有dom)
• 在vue中只支持beforeCreate和created两个生命周期(因为服务端没有dom,只有这两个生命周期和dom无关)
• SSR技术成本较高

SPA为什么不利于SEO优化？

因为从服务器上获取html时dom元素是空的<div id='app'></div>,js为异步加载，此时爬虫无法爬去到dom中的内容。而SSR技术可以把dom字符串完整的渲染到页面上(可以理解为同步输出内容)。爬虫能抓取到页面内容，利于SEO。

为什么SSR可以加快首屏加载,不会出现白屏？

因为ssr是在服务器里渲染了一个完整的html,然后再返回给浏览器。而不是说先去加载html再去加载js文件,动态渲染dom。

服务端渲染大致原理

1. app.js引入客户端入口文件和服务端入口文件
2. 通过webpack分别打包出两个bundle,一个serviceBundle(服务端代码)和一个clientBundle(客户端代码)
3. 通过serviceBundle渲染出一份html字符串,返回给客户端
4. 然后把打包之后的客户端代码手动挂载到html上面（因为html字符串中没有js逻辑，所以需要再把打包之后的客户端代码挂载到html上面,这样服务端代码就拥有了js功能）