vue3.0对服务端进行渲染
vue3.0支持服务端渲染。Vue支持将组件在服务端直接渲染成HTML字符串,作为服务端响应返回给浏览器,最后在浏览器端将静态的HTML“激活”(hydrate) 为能够交互的客户端应用。一个由服务端渲染的Vue应用可以被认为是“同构的” 或“通用的,因为应用的大部分代码同时运行在服务端和客户端。vue用服务端渲染的优势:更快的首屏加载、统一的心智模型、更好的SEO。
vue支持服务端渲染(SSR)。
Vue.js 是一个用于构建客户端应用的框架。默认情况下,Vue 组件的职责是在浏览器中生成和操作 DOM。然而,Vue 也支持将组件在服务端直接渲染成 HTML 字符串,作为服务端响应返回给浏览器,最后在浏览器端将静态的 HTML“激活”(hydrate) 为能够交互的客户端应用。
一个由服务端渲染的 Vue.js 应用也可以被认为是“同构的”(Isomorphic) 或“通用的”(Universal),因为应用的大部分代码同时运行在服务端和客户端。
为什么要用服务端渲染 (SSR)?
与客户端的单页应用 (SPA) 相比,SSR 的优势主要在于:
更快的首屏加载:这一点在慢网速或者运行缓慢的设备上尤为重要。服务端渲染的 HTML 无需等到所有的 JavaScript 都下载并执行完成之后才显示,所以你的用户将会更快地看到完整渲染的页面。除此之外,数据获取过程在首次访问时在服务端完成,相比于从客户端获取,可能有更快的数据库连接。这通常可以带来更高的核心 Web 指标评分、更好的用户体验,而对于那些“首屏加载速度与转化率直接相关”的应用来说,这点可能至关重要。
统一的心智模型:你可以使用相同的语言以及相同的声明式、面向组件的心智模型来开发整个应用,而不需要在后端模板系统和前端框架之间来回切换。
更好的 SEO:搜索引擎爬虫可以直接看到完全渲染的页面。
使用 SSR 时还有一些权衡之处需要考量:
开发中的限制。浏览器端特定的代码只能在某些生命周期钩子中使用;一些外部库可能需要特殊处理才能在服务端渲染的应用中运行。
更多的与构建配置和部署相关的要求。服务端渲染的应用需要一个能让 Node.js 服务器运行的环境,不像完全静态的 SPA 那样可以部署在任意的静态文件服务器上。
更高的服务端负载。在 Node.js 中渲染一个完整的应用要比仅仅托管静态文件更加占用 CPU 资源,因此如果你预期有高流量,请为相应的服务器负载做好准备,并采用合理的缓存策略。
服务端渲染 (SSR) vs. 静态站点生成(SSG)
静态站点生成 (Static-Site Generation,缩写为 SSG),也被称为预渲染,是另一种流行的构建快速网站的技术。如果用服务端渲染一个页面所需的数据对每个用户来说都是相同的,那么我们可以只渲染一次,提前在构建过程中完成,而不是每次请求进来都重新渲染页面。预渲染的页面生成后作为静态 HTML 文件被服务器托管。
SSG 保留了和 SSR 应用相同的性能表现:它带来了优秀的首屏加载性能。同时,它比 SSR 应用的花销更小,也更容易部署,因为它输出的是静态 HTML 和资源文件。这里的关键词是静态:SSG 仅可以用于消费静态数据的页面,即数据在构建期间就是已知的,并且在多次部署期间不会改变。每当数据变化时,都需要重新部署。
如果你调研 SSR 只是为了优化为数不多的营销页面的 SEO (例如 /、/about 和 /contact 等),那么你可能需要 SSG 而不是 SSR。SSG 也非常适合构建基于内容的网站,比如文档站点或者博客。事实上,你现在正在阅读的这个网站就是使用 VitePress 静态生成的,它是一个由 Vue 驱动的静态站点生成器。
Hello World
准备在行动中体验服务端渲染吧。服务端渲染(即SSR)听起来很复杂,不过一个简单的Node脚本只需要3步就可以实现这个功能:
// 步骤 1:创建一个Vue实例
var Vue = require('vue')
var app = new Vue({render: function (h) {return h('p', 'hello world')}
})
// 步骤 2: 创建一个渲染器
var renderer = require('vue-server-renderer').createRenderer()
// 步骤 3: 将 Vue实例 渲染成 HTML
renderer.renderToString(app, function (error, html) {if (error) throw errorconsole.log(html)// => <p server-rendered="true">hello world</p>
})
这并不困难。当然这个示例比大部分应用都简单,来探讨这些功能怎样运作
通过Express Web服务器实现简单的服务端渲染
如果没有一个Web服务器,很难说是服务端渲染,所以我们来补充它。我们将构建一个非常简单的服务端渲染应用,只用ES5,也不带其他构建步骤或Vue插件。
启动一个应用告诉用户他们在一个页面上花了多少时间。
new Vue({template: '<div>你已经在这花了 {{ counter }} 秒。</div>',data: {counter: 0},created: function () {var vm = thissetInterval(function () {vm.counter += 1}, 1000)}
})
为了适应服务端渲染,我们需要进行一些修改,让它可以在浏览器和Node中渲染:
在浏览器中,将我们的应用实例添加到全局上下文( window)上,我们可以安装它。
在Node中,导出一个工厂函数让我们可以为每个请求创建应用实例。
实现这个需要一点模板:
// assets/app.js
(function () { 'use strict'var createApp = function () {// ---------------------// 开始常用的应用代码// ---------------------// 主要的Vue实例必须返回,并且有一个根节点在id "app"上,这样客户端可以加载它。return new Vue({template: '<div id="app">你已经在这花了 {{ counter }} 秒。</div>',data: {counter: 0},created: function () {var vm = thissetInterval(function () {vm.counter += 1}, 1000)}})// -------------------// 结束常用的应用代码// -------------------}if (typeof module !== 'undefined' && module.exports) {module.exports = createApp} else {this.app = createApp()}
}).call(this)
现在有了应用代码,接着加一个 html文件。
<!-- index.html -->
<!DOCTYPE html>
<html>
<head><title>My Vue App</title><script src="/assets/vue.js"></script>
</head>
<body><div id="app"></div><script src="/assets/app.js"></script><script>app.$mount('#app')</script>
</body>
</html>
主要引用assets文件夹中我们先前创建的app.js,以及vue.js文件,我们就有了一个可以运行的单页面应用
然后为了实现服务端渲染,在服务端需要加一个步骤。
// server.js
'use strict'
var fs = require('fs')
var path = require('path')
// 定义全局的Vue为了服务端的app.js
global.Vue = require('vue')
// 获取HTML布局
var layout = fs.readFileSync('./index.html', 'utf8')
// 创建一个渲染器
var renderer = require('vue-server-renderer').createRenderer()
// 创建一个Express服务器
var express = require('express')
var server = express()
// 部署静态文件夹为 "assets"文件夹
server.use('/assets', express.static(path.resolve(__dirname, 'assets')
))
// 处理所有的Get请求
server.get('*', function (request, response) {// 渲染我们的Vue应用为一个字符串renderer.renderToString(// 创建一个应用实例require('./assets/app')(),// 处理渲染结果function (error, html) {// 如果渲染时发生了错误if (error) {// 打印错误到控制台console.error(error)// 告诉客户端错误return response.status(500).send('Server Error')}// 发送布局和HTML文件response.send(layout.replace('<div id="app"></div>', html))})
})
// 监听5000端口
server.listen(5000, function (error) {if (error) throw errorconsole.log('Server is running at localhost:5000')
})
这样就完成了。整个示例,克隆下来深度实验。一旦它在本地运行时,你可以通过在页面右击选择页面资源(或类似操作)确认服务选渲染真的运行了。可以在body中看到:
<div id="app" server-rendered="true">You have been here for 0 seconds.</div>
代替:
<div id="app"></div>
流式响应
Vue还支持流式渲染,优先选择适用于支持流的Web服务器。允许HTML一边生成一般写入相应流,而不是在最后一次全部写入。其结果是请求服务速度更快,没有缺点!
为了使上一节应用代码适用流式渲染,可以简单的替换 server.get('*',...)为下面的代码:
// 拆分布局成两段HTML
var layoutSections = layout.split('<div id="app"></div>')
var preAppHTML = layoutSections[0]
var postAppHTML = layoutSections[1]
// 处理所有的Get请求
server.get('*', function (request, response) {// 渲染我们的Vue实例作为流var stream = renderer.renderToStream(require('./assets/app')())// 将预先的HTML写入响应response.write(preAppHTML)// 每当新的块被渲染stream.on('data', function (chunk) {// 将块写入响应response.write(chunk)})// 当所有的块被渲染完成stream.on('end', function () {// 将post-app HTML写入响应response.end(postAppHTML)})// 当渲染时发生错误stream.on('error', function (error) {// 打印错误到控制台console.error(error)// 告诉客服端发生了错误return response.status(500).send('Server Error')})
})
这不比之前的版本复杂,甚至这对你来说都不是个新概念。我们做了:
建立流
在应用响应前写入HTML
在可获得时将应用HTML写入响应
在响应最后写入HTML
处理任何错误
组件缓存
Vue的服务端渲染默认非常快,但是你可以通过缓存渲染好的组件进一步提高性能。这被认为是一种先进的功能,但是,如果缓存了错误的组件(或者正确的组件带有错误的内容)将导致应用渲染出错。特别注意:
不应该缓存组件包含子组件依赖全局状态(例如来自vuex的状态)。如果这么做,子组件(事实上是整个子树)也会被缓存。所以要特别注意带有slots片段或者子组件的情况。
设置
在警告情况之外的,我们可以用下面的方法缓存组件。
首先,你需要提供给渲染器一个 缓存对象。这有个简单的示例使用 lru-cache
var createRenderer = require('vue-server-renderer').createRenderer
var lru = require('lru-cache')
var renderer = createRenderer({cache: lru(1000)
})
这将缓存高达1000个独立的渲染。对于更进一步缓存到内容中的配置,看lru-cache设置
然后对于你想缓存的组件,你可以为他们提供:
一个唯一的名字
一个 serverCacheKey函数,返回一个唯一的组件作用域
例如:
Vue.component({name: 'list-item',template: '<li>{{ item.name }}</li>',props: ['item'],serverCacheKey: function (props) {return props.item.type + '::' + props.item.id}
})
缓存的理想组件
任何纯组件可以被安全缓存 - 这是保证给任何组件传递一样的数据产生相同的HTML。这些场景的例子包括:
静态的组件 (例如 总是尝试一样的HTML,所以 serverCacheKey 函数可以被返回 true)
列表组件(当有大量列表,缓存他们可以改善性能)
通用UI组件 (例如 buttons, alerts, 等等 - 至少他们通过props获取数据而不是 slots或者子组件)
说明:
现在,应该理解服务端渲染背后的基本概念了。但是,构建过程、路由、Vuex每一个都有自己的注意事项。
vue3.0对服务端进行渲染相关推荐
- 使用 Vue 2.0 实现服务端渲染的 HackerNews
Vue 2.0 支持服务端渲染 (SSR),并且是流式的,可以做组件级的缓存,这使得极速渲染成为可能.同时, 和 2.0 也都能够配合 SSR 提供同构路由和客户端 state hydration.v ...
- Vue3.0基础教程:条件渲染:v-if v-else-if v-if;列表渲染:v-for
Vue3.0 学习笔记 4 条件渲染 v-if指令 v-if指令用于动态渲染一块内容,只有当该指令的表达式值为true时才渲染,也可配套使用v-else指令设置一个else-if块和else块 < ...
- 热血江湖服务端 linux,热血江湖V2.0商业服务端百宝阁 GM工具+客户端+架设教程
热血江湖V2.0商业服务端百宝阁 GM工具+客户端+架设教程 本人没有测试过!!!本人没有测试过!!!本人没有测试过!!! 可升级120级,个别服升150级8转 爆率低 特别是强化石 强化石可以叠加 ...
- php热血江湖怎么安装,端游【热血江湖】V2.0商业服务端百宝阁 GM工具+客户端+架设教程...
热血江湖V2.0商业服务端百宝阁 GM工具+客户端+架设教程 本人没有测试过!!!本人没有测试过!!!本人没有测试过!!! 可升级120级,个别服升150级8转 爆率低 特别是强化石 强化石可以叠加 ...
- markdownpad2 html渲染组件出错_「万字长文」一文吃透React SSR服务端同构渲染
写在前面 前段时间一直在研究 react ssr技术,然后写了一个完整的 ssr开发骨架.今天写文,主要是把我的研究成果的精华内容整理落地,另外通过再次梳理希望发现更多优化的地方,也希望可以让更多的人 ...
- vue3.0实现移动端自适应
vue-cli3.0实现移动端自适应,亲测有效 项目使用vue3.0编写代码,说要打包成apk文件,在安卓上看,现在需要适配移动端的样式,记录一下,亲测有效. 安装插件 vue脚手架略过 lib-fl ...
- 使用dwr3.0实现服务端向浏览器做消息推送,做滚动评论或弹幕效果,而且根据视频id做推送消息拦截功能
最近项目要实现视频播放时做弹幕和评论滚动,使用flash做sockt编程不会,就想到使用服务器消息推送做,翻找资料发现使用html5的websocket可以实现,但是ie8是不支持websocket的 ...
- Vue3 服务端渲染
本文主要介绍: 1.什么是服务端渲染.与客户端渲染的区别是什么? 2.为什么需要服务端渲染,服务端渲染的利弊 3.服务端渲染的原理及技术实现 一.客户端渲染(CSR)VS服务端渲染(SSR) CSR是 ...
- React + Koa 实现服务端渲染(SSR)
⚛️React是目前前端社区最流行的UI库之一,它的基于组件化的开发方式极大地提升了前端开发体验,React通过拆分一个大的应用至一个个小的组件,来使得我们的代码更加的可被重用,以及获得更好的可维护性 ...
最新文章
- 2021-01-14python函数传参是传值还是传引用? 参数若是简单类型是传值 若是对象类型则是传引用,python是兼容两者传参方式的
- 一个SAP成都研究院开发工程师的2020年度总结:未知生,焉知死
- SAP官方提供的人脸识别API
- 【C++学习笔记二】C++继承
- 12种JavaScript MVC框架之比较
- 我也有了博客了,呵呵~~
- 《博客页面制作》教程
- 安装配置limesurvey
- 在线教会你Excel批量转PDF的小妙招
- Python私有属性与私有方法
- 天梯赛题目练习——平面向量加法(附带PTA测试点)
- AndroidStudio SVN 文件忽略
- mybatis的错误:Failed to load ApplicationContext
- 交通违章 处罚[转]
- 机器视觉(系列二)----图像采集之照明综述
- 免费的区块链数据API网址
- DX200机器人参数
- C#实现贪吃蛇小游戏
- Word的COM加载项开发指南
- 使用Amazon S3 Python版本 连接ceph 基本操作