VUE SSR

vue ssr

SSR?

将组件或页面渲染为服务器端的 HTML 字符串，将它们直接发送到浏览器，最后将这些静态标记"激活"为客户端上完全可交互的应用程序。

为什么使用服务器端渲染 (SSR)？

优势

• 更好的 SEO，由于搜索引擎爬虫抓取工具可以直接查看完全渲染的页面
• 更快的内容到达时间，解决首屏渲染慢点问题

考量的点

• 开发条件所限，某些生命周期钩子函数只能在浏览器中触发，一些扩展库需要特殊处理
• 构建部署要求多，服务端渲染必须在node server环境下
• 服务器端负载变大
• 

预渲染

只是用来改善少数营销页面（例如 /, /about, /contact 等）的 SEO，用预渲染更合适

编写通用代码

服务端数据响应是禁止响应式数据，每个请求都是一个新的实例，防止交叉请求造成的状态污染

避免状态单例

• Node.js 服务器是一个长期运行的进程。当我们的代码进入该进程时，它将进行一次取值并留存在内存中。这意味着如果创建一个单例对象，它将在每个传入的请求之间共享。
  vue、router、store 和 event bus 同理
  为每个请求创建一个新的根 Vue 实例

• 只有beforeCreate 和 created 会在服务器端渲染 (SSR) 过程中被调用
  在特定的平台访问，如客户端：window document对象，axios前后端
  在创建createBundleRenderer时 runInNewContext默认是true可以避免状态单例问题，但一般都设置为false，防止每次都创建上下文重新执行整个 bundle，造成相当大的性能开销

模板

<!--vue-ssr-outlet--> 注释 -- 这里将是应用程序 HTML 标记注入的地方

介绍构建步骤

基本结构

异步组件减小首屏bundle体积
路由必须使用history，hash模式无法提交到服务器，无法使用。
数据预取和状态

数据预取可能是服务器渲染应用程序中最复杂的问题

问题

ssr渲染期间，本质上是在渲染应用程序的‘快照’，对于依赖的异步数据，那么在开始渲染过程之前，需要先预取和解析好这些数据。
客户端，在挂载 (mount) 到客户端应用程序之前，需要获取到与服务器端应用程序完全相同的数据

解决

在服务器端，我们可以在渲染之前预取数据，并将数据填充到 store 中（vuex）。在 HTML 中序列化(serialize)和内联预置(inline)状态
在挂载(mount)到客户端应用程序之前，可以直接从 store 获取到内联预置(inline)状态
服务端预取
调用组件暴露的asyncData，完成数据预取，附加到渲染上下文(render context)中
context.state 将作为 window.INITIAL_STATE 状态，自动嵌入到最终的 HTML 中。而在客户端，在挂载到应用程序之前，store 就应该获取到状态

客户端预取

在路由导航之前解析数据
完整的数据，有时预取时间较长
建议提供一个数据加载指示器
通过全局的mixin 实现在匹配要渲染的视图后，再获取数据
渲染时可能数据不完整
store代码拆分
由于模块现在是路由组件的依赖，所以它将被 webpack 移动到路由组件的异步 chunk 中
客户端激活
id + data-server-rendered=“true” 以激活模式进行挂载

webpack配置

vue-server-renderer提供api createBundleRenderer 可生成bundle renderer
bundle renderer 提供以下优点
内置的 source map 支持
在开发环境甚至部署过程中热重载
关键 CSS(critical CSS) 注入（在使用 *.vue 文件时）：自动内联在渲染过程中用到的组件所需的CSS
使用 clientManifest 进行资源注入：自动推断出最佳的预加载(preload)和预取(prefetch)指令，以及初始渲染所需的代码分割 chunk
手动注入
设置 inject：false
在 renderToString 回调函数中，你传入的 context 对象会暴露
renderResourceHints
renderStyles
renderState
renderScripts

缓存

创建组件实例和虚拟 DOM 节点的开销, 利用缓存策略，可以极大改善响应时间并减少服务器负载
页面级别的缓存
使用micro-caching 的缓存策略，来大幅度提高应用程序处理高流量的能力

组件级别的缓存

vue-server-renderer 内置支持组件级别缓存 (component-level caching)。要启用组件级别缓存，你需要在创建 renderer 时提供具体缓存实现方式(cache implementation)。典型做法是传入 lru-cache