ssr解决什么问题
- 首屏的加载速度（相比传统的先下载js，再渲染dom，通过服务器直接返回html，html解析完成就能看到页面，但因为把渲染html的过程转移到服务器，需要维护node的负载均衡）
- SEO优化，一些异步数据要获取的话，就不会被爬虫得到
核心需要解决
- 渲染出来的html，不会处理事件绑定，事件绑定还是会在客户端做，还有就是一些响应式框架本身的内容，所以代码是分为服务端代码和客户端代码
- 路由，ssr只会处理首屏的路由，如果是spa页面，之后再页面的跳转还是交给客户端路由来做，进入服务端的url，通过context传递给构造（renderToString），在服务端构造时得到这个url，并让router跳转到url，得到匹配的组件再进行渲染拿到html，然后传给客户端
- 一些异步数据放到asyncData去获取，asyncData在服务端匹配路由后调用这个路由的asyncData，服务端的store和客户端的store就变得不一致了，要将服务端的store传给客户端，在服务端构造的时候，把这个store存回context，在构造html时新增script标签，挂载在window对象的某个属性里，客户端通过访问window对象的某个属性同步store
- style 1. 在vue-style-loader 15.9.8的时候，在server环境下，vue-loader在style转换的时候会调用style${i}.__inject__函数，利用全局的__VUE_SSR_CONTEXT__，把style绑到__VUE_SSR_CONTEXT__，context指向__VUE_SSR_CONTEXT__就可以拿到styles，再定义styles去调用renderStyles，将能拿到styles标签并渲染 2.但在16的版本之后就改变了，要靠打包外置的css来读取样式，不会调用到__inject__，在client下，会调用一次add，就把style插入到document中
- 在server会匹配到context才执行代码 [vue-style-loader 15.9.8]
function injectStyles (context) {
var style0 = require(\"./Home.vue?vue&type=style&index=0&id=f695f362&scoped=true&lang=css&\")
if (style0.__inject__) style0.__inject__(context)
}
/* normalize component */
import normalizer from \"!../../node_modules/.pnpm/vue-loader@15.9.8_679359cdb69c218f2f8f476b2ba08796/node_modules/vue-loader/lib/runtime/componentNormalizer.js\"
var component = normalizer(script,render,staticRenderFns,false,injectStyles,"f695f362","78941379")
export default component.exports
2.直接将style插入到document
代码实现: