vue 服务器渲染

shadowbook 发布于2019-08-22 14:55 / 2525人阅读

摘要：服务器渲染作用可以加快首屏渲染速度。当打开浏览器，输入项目地址，首先访问服务器，服务器渲染出来返回到浏览器的只有文档和相应的注入，还有端从服务器端获取的数据，一般放在全局的变量里。此后浏览器端行为与端几乎不再相关。

vue 服务器渲染
作用：

可以加快首屏渲染速度。

有利于搜索引擎的seo。

原理：

自己的粗浅理解：

node端和浏览器端都能运行js。当打开浏览器，输入项目地址，首先访问node服务器，node服务器渲染出来返回到浏览器的只有html文档和相应的js、css注入，还有node端从api服务器端获取的数据，一般放在全局的变量里。列window.vueStore = api服务器数据。然后在浏览器端，当vue 根实例第一次初始化的时候，把数据注入到全局状态管理 vuex里。作为浏览器端相应路由里的数据，给路由级组件提供相应的数据状态，然后渲染出相应的虚拟dom, 同时复用node端返回的已生成的dom节点。因为例如户端渲染的虚拟dom == node端渲染返回的的dom节点。此后浏览器端行为与node端几乎不再相关。

做到两端对路由响应的统一，两端需要对同一个路由响应同样的函数，如尤大官网上 asyncData,你也可以指定其他的函数。node端当进入路由就会解析配备当前路由的路由组件，然后把他们（asyncData）都找出来，放在promise.all 里面，等拉去api 服务器端的数据获取完后，放入全局状态管理 vuex里面。浏览器端一种实现就是路由hook 里 beforeResolve 里面完成类似 node端获取数据的方式，第二种是在路由组件里的 beforeMounted 里面去触发路由组件的this.$options.asyncData.

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

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/93002.html

详解Vue服务端渲染

摘要：二服务端渲染初体验使用的服务端渲染功能，需要引入提供的服务端渲染模块，其作用是创建一个渲染器，该渲染器可以将实例渲染成字符串。详解Vue服务端渲染一、服务端渲染 - 简介所谓服务端渲染就是将代码的渲染交给服务器，服务器将渲染好的html字符串返回给客户端，再由客户端进行显示。服务器端渲染的优点有利于SEO搜索引擎优化，因为服务端渲染是将渲染好的html字符串返回给了客户端，...

Paul_King 2019-08-26 10:33 评论0 收藏0
Vue 服务端渲染实践 ——Web应用首屏耗时最优化方案

摘要：好在后是支持服务端渲染的，零零散散花费了两三周事件，通过改造现有项目，基本完成了在现有项目中实践了服务端渲染。在服务端生成对应的字符串，客户端接收到对应的字符串，能立即渲染，最高效的首屏耗时。服务端渲染的原理是虚拟。实现前后端同构应用。随着各大前端框架的诞生和演变，SPA开始流行，单页面应用的优势在于可以不重新加载整个页面的情况下，通过ajax和服务器通信，实现整个Web应用拒不更新...

terasum 2019-08-23 16:06 评论0 收藏0
无痛学会各种 2 的 Vue2+Vuex2+Webpack2 前后端同构渲染

摘要：它会检测出最大静态子树就是不需要动态性的子树并且从渲染函数中萃取出来。这样在每次重渲染的时候，它就会直接重用完全相同的同时跳过比对。需要注意的是，中的操作必须是同步的，不可以存在异步操作的情况。新增：哈哈，最近又推出了 vue 的文章，在这里放个链接~手把手教你从零写一个简单的 VUE 感谢有人看我扯技术，这篇文章主要介绍最近非常火的vue2前端框架的特点和vue2+vuex2+we...

fish 2019-08-29 11:27 评论0 收藏0
无痛学会各种 2 的 Vue2+Vuex2+Webpack2 前后端同构渲染

摘要：它会检测出最大静态子树就是不需要动态性的子树并且从渲染函数中萃取出来。这样在每次重渲染的时候，它就会直接重用完全相同的同时跳过比对。需要注意的是，中的操作必须是同步的，不可以存在异步操作的情况。新增：哈哈，最近又推出了 vue 的文章，在这里放个链接~手把手教你从零写一个简单的 VUE 感谢有人看我扯技术，这篇文章主要介绍最近非常火的vue2前端框架的特点和vue2+vuex2+we...

30e8336b8229 2019-08-22 10:40 评论0 收藏0
无痛学会各种 2 的 Vue2+Vuex2+Webpack2 前后端同构渲染

摘要：它会检测出最大静态子树就是不需要动态性的子树并且从渲染函数中萃取出来。这样在每次重渲染的时候，它就会直接重用完全相同的同时跳过比对。需要注意的是，中的操作必须是同步的，不可以存在异步操作的情况。新增：哈哈，最近又推出了 vue 的文章，在这里放个链接~手把手教你从零写一个简单的 VUE 感谢有人看我扯技术，这篇文章主要介绍最近非常火的vue2前端框架的特点和vue2+vuex2+we...

Pluser 2019-08-01 15:52 评论0 收藏0
手把手教你搭建SSR(vue/vue-cli + express)

摘要：最近简单的研究了一下，对已经有了一个简单的认知，主要应用于单页面应用，是很不错的框架。创建好之后，在命令行直接输入即可，当控制台显示服务已启动则表示该服务已经启动成功了。配置参数中有一项为这项配置的就是我们即将使用的模板。最近简单的研究了一下SSR，对SSR已经有了一个简单的认知，主要应用于单页面应用，Nuxt是SSR很不错的框架。也有过调研，简单的用了一下，感觉还是很不错。但是还是...

liangdas 2019-08-23 18:05 评论0 收藏0