服务端渲染-Nuxt

生命周期

• 只有初次访问返回的html是对应页面的实际DOM内容。之后在页面内进行跳转都是用内部vue-router方式。所以导致了只触发s端的asyncData函数
• 加载serverMiddleware服务端相关的中间件
• 加载服务端plugins及配置为{ model: 'server' }的
• 执行 store.action 内的nuxtServerInit 函数
• 执行middleware全局/页面/路由中间件
• 关于asyncData触发流程，服务器端的只执行一次
  • 初次访问连接时会执行s端的 asyncData 函数
  • 之后页面再跳转时执行的是c端的 asyncData 函数
  • 两者都会阻塞页面
• 在服务端支持的vue生命周期只有beforeCreate/created
• vuex会执行两次，但实际赋值是在serverInit阶段

原理

源码共有两个入口，一个server-entry, 一个client-entry。分别生成一个bundle。服务器执行server-bundle创建Renderer，在接收到请求并渲染出对应的首屏页面后，会将渲染结果以HTML字符串的形式返回，并携带着剩余的路由信息给客户端去渲染其他路由的页面。

Vuex中的数据如何同步

为了客户端能够同步Vuex中已有的数据，当我们将状态附加到上下文context中，并且 template 选项用于 renderer 时，状态将自动序列化为window.INITIAL_STATE，并注入 HTML。与此同时，客户端也需要使用这个值作为store的初始状态，以此来完成同步。客户端的代码看上去如下：