vue ssr源码快速解读与记录~

背景： 最近在看某vue ssr框架代码的时候遇到一些问题，在这里记录下，防止后面忘掉~

1. vue-server-render这个包是干什么的？

const { createBundleRenderer } = require('vue-server-renderer')
const renderer = createBundleRenderer(serverBundle, { /* 选项 */ })

其实主要就是 createBundleRenderer，这个函数接收两个参数

const { createBundleRenderer } = require('vue-server-renderer')
// 前端资源的加载路径
const clientManifest = require(resolveProject('./dist/vue-ssr-client-manifest.json')) 

const templatePath = resolveProject('./src/index.template.html')
const template = fs.readFileSync(templatePath, 'utf-8')  //基础html

//服务端资源的源码
const bundle = require(resolveProject('./dist/vue-ssr-server-bundle.json')) 
const renderer = createBundleRenderer(bundle,{
  template,
  clientManifest,
  inject: false
})

renderer.renderToString(ctx)  //ctx指的是上下文对象，koa中的那个ctx

整体流程：
请求打过来，穿过层层koa中间件，ctx作为 
createBundleRenderer(bundle,{
  template,
  clientManifest
}).renderToString(ctx)的参数传入，
并且在renderToString函数中(如果有一些自定义配置，可以通过entry-server.ts配置，例如错误抛出)
renderToString指的是默认html模板，clientManifest指的是前端资源加载路径及加载方式，bundle指的是服务端渲染的代码，如果没有任何错误抛出，
createBundleRenderer(bundle,{
  template,
  clientManifest
}).renderToString(ctx)，将html挂载到body上(body.html)，返回给前端html
当有错误抛出(比如ctx的url上有我们自定义的degradeAll与degrade，我们就抛出错误对象)，那么就会调用 sendSpaHtml方法返回 默认html模板

可以猜测出
createBundleRenderer(bundle,{
  template,
  clientManifest
}).renderToString(ctx)到底做了什么？

1. 将ctx与不同的vue组件关联起来，通过解析ctx中的路径，匹配到不同的vue路由
2. 通过ctx路径上不同的参数，返回不同的内容，比如ssr渲染的html，csr渲染的html(主动降级/被动降级)，资源不存在的404.html，或者是已缓存的html

猜测渲染流程如下：

传统html项目：html-->真实dom

vue项目：模板html-(加载)->vue实例-->AST抽象语法树-->render函数-->虚拟dom--->真实dom

vue ssr项目：(vue实例-->AST抽象语法树-->render函数-->虚拟dom-->html字符串)+ 模板html ======> html--->真实dom

2. 为什么要做缓存？为什么有两部分缓存的设置？

1. 减轻服务器的负载
2. 加快响应速度

我的理解是：
第一部分也就是createBundleRenderer的第二个参数这个缓存，是组件缓存，是针对所有的ssr渲染的所有组件进行一个缓存
这部分猜测也是缓存的html字符串

第二部分是针对不同类型页面做的缓存，
比如有asyncData方法的这种，说明有异步请求，或者数据变动，那这种就缓存的时间短一点(2分钟)~
没有asyncData方法的的这种，说明是静态页面，那就缓存的实际长一点(1天)~
这部分缓存的内容是生成的html字符串