vue 服务器渲染

vue 服务器渲染
作用:

  1. 可以加快首屏渲染速度。
  2. 有利于搜索引擎的seo。

原理:

自己的粗浅理解:

  1. node端和浏览器端都能运行js。当打开浏览器, 输入项目地址,首先访问node服务器,node服务器渲染 出来返回到浏览器的 只有html文档 和相应的js、css注入,还有node端从api服务器端获取的数据, 一般放在全局的变量里。列window.vueStore = api服务器数据。然后在浏览器端, 当vue 根实例第一次初始化的时候,把数据注入到全局状态管理 vuex里。作为浏览器端相应路由里的数据,给路由级组件 提供 相应的数据状态,然后渲染出相应的虚拟dom, 同时复用node端 返回的已生成的dom节点。因为例如户端渲染的虚拟dom == node端渲染返回的的dom节点。此后浏览器端行为 与node端几乎不再相关。
  2. 做到两端对路由响应的统一,两端 需要 对同一个路由 响应同样的函数, 如尤大官网上 asyncData,你也可以指定 其他的函数。node端当进入路由 就会解析 配备当前路由的路由组件,然后 把他们(asyncData) 都 找出来, 放在promise.all 里面,等拉去api 服务器端的数据获取完后, 放入全局状态管理 vuex里面。浏览器端 一种实现就是路由hook 里 beforeResolve 里面 完成类似 node端获取数据的方式, 第二种是在路由组件里的 beforeMounted 里面去触发路由组件的this.$options.asyncData.

    详细介绍(尤大官方文档
    开发移动端项目 提供自己改良的nuxt
    nuxt官方文档

    原文作者:L6zt
    原文地址: https://segmentfault.com/a/1190000013441067
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞