本帖说明
该贴是对vue SSR Guide解读和补充,对于官网文档已有内容会以引用方式体现。由于官网demo在国内无法运行,该贴最后也提供了一个完整的可以运行的demo,帖子中提到的代码均是来自于该demo,供学习交流。
介绍
什么是服务器端渲染(SSR)?
Vue.js 是构建客户端应用程序的框架。默认情况下,可以在浏览器中输出 Vue 组件,进行生成 DOM 和操作 DOM。然而,也可以将同一个组件渲染为服务器端的 HTML 字符串,将它们直接发送到浏览器,最后将静态标记"混合"为客户端上完全交互的应用程序。
借助vue-server-renderer 将vue实例渲染为浏览器可以识别的html字符串。
为什么使用服务器端渲染(SSR)?
- 更好的 SEO
- 更快的内容到达时间 (白屏)
左侧为浏览器渲染,右侧为服务器渲染,从图中可以看出服务端渲染理论上明显少于浏览器渲染。
基本用法
安装
git clone https://github.com/s249359986/learnssr.git cd learnssr npm install npm run dev
代码结构
src ├── components │ ├── Foo.vue ├── views │ ├── Home.vue ├── App.vue ├── app.js ├── client-entry.js ├── server-entry.js
代码详解
server.js 是服务端启动入口文件,接收客户端对页面的所有请求。
if (isProd) { /** 生产环境,createRenderer将已经通过webpack打包好的server-bundle.js转化为一个可以操作的renderer对象。 **/ renderer = createRenderer(fs.readFileSync(resolve('./dist/server-bundle.js'), 'utf-8')) /** 入口模板文件 **/ indexHTML = parseIndex(fs.readFileSync(resolve('./dist/index.html'), 'utf-8')) } else { /** 开发环境,createRenderer将已经通过webpack打包好的server-bundle.js转化为一个可以操作的renderer对象。 **/ require('./build/setup-dev-server')(app, { bundleUpdated: bundle => { renderer = createRenderer(bundle) }, indexUpdated: index => {//index为入口文件及index.html indexHTML = parseIndex(index) } }) } function createRenderer (bundle) { return require('vue-server-renderer').createBundleRenderer(bundle, { cache: require('lru-cache')({ max: 1,//1000, maxAge: 2000//1000 * 60 * 15 }), runInNewContext: false }) } /* 读取入口文件 */ function parseIndex (template) { const contentMarker = '<!-- APP -->' const i = template.indexOf(contentMarker) return { head: template.slice(0, i), tail: template.slice(i + contentMarker.length) } } const serve = (path, cache) => express.static(resolve(path), { maxAge: cache && isProd "htmlcode">export default context => { const s = isDev && Date.now() router.push(context.url) const matchedComponents = router.getMatchedComponents() if (!matchedComponents.length) { return Promise.reject({ code: '404' }) } return Promise.all(matchedComponents.map(component => { /* 增加服务端数据预处理 start */ if (component.asyncData) { return component.asyncData({ store, route: router.currentRoute }) } /* 增加服务端数据预处理 end */ })).then(() => { isDev && console.log(`data pre-fetch: ${Date.now() - s}ms`) context.initialState = store.state return app }) }客户端vue实例入口文件.
/* 第一种方式 */ Vue.mixin({ beforeMount () { const { asyncData } = this.$options console.log('beforeMount',this.$store) if (asyncData) { // 将获取数据操作分配给 promise // 以便在组件中,我们可以在数据准备就绪后 // 通过运行 `this.dataPromise.then(...)` 来执行其他任务 this.dataPromise = asyncData({ store: this.$store, route: this.$route }) } }, beforeRouteUpdate (to, from, next) { const { asyncData } = this.$options console.log('beforeRouteUpdate',this.$store) if (asyncData) { asyncData({ store: this.$store, route: to }).then(next).catch(next) } else { next() } } }) /** 更新客户端store,与服务端store同步 **/ // store.replaceState(window.__INITIAL_STATE__) if (window.__INITIAL_STATE__) { store.replaceState(window.__INITIAL_STATE__) } // actually mount to DOM router.onReady(() => { /** 挂载实例,客户端激活,所谓激活,指的是 Vue 在浏览器端接管由服务端发送的静态 HTML,使其变为由 Vue 管理的动态 DOM 的过程。注释掉app.$mount('#app') 可以清楚看到<div id="app" data-server-rendered="true"> 客户端通过data-server-rendered="true"知道该html是vue在服务端渲染的,并且不会在做多余的渲染。由于在服务端无法绑定事件,只有通过客户端vue处理。 **/ app.$mount('#app') })以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
华山资源网 Design By www.eoogi.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
华山资源网 Design By www.eoogi.com
暂无评论...
更新日志
2024年09月23日
2024年09月23日
- 金池VS刘罡2009《双声情》[WAV+CUE]
- 冯奥迪《卄》[320K/MP3][67.08MB]
- 冯奥迪《卄》[FLAC/分轨][172.46MB]
- Merryland《Merryland》[320K/MP3][69.48MB]
- 苏芮.1991-停在我心里的温柔【福茂】【WAV+CUE】
- 苏慧伦.2020-面面Every.Side.of.Me【相信音乐】【WAV+CUE】
- 群星.1991-不一样的感觉REMIX【宝丽金】【WAV+CUE】
- 银霞.1983-《你那好冷的小手》珍藏纪念版[WAV分轨]
- 银霞.2002-《国语巨星专辑VOL.3》2CD台湾版[WAV+CUE]
- 金池刘罡《昨日情歌HQ》头版限量编号[低速原抓WAV+CUE]
- 段奥娟.2024-23·岁碎念【白米范】【FLAC分轨】
- 顺子.2001-昨日·唯一·更多·顺子自选辑【魔岩】【WAV+CUE】
- 无印良品.1999-私藏三首·原创相对论(EP)【滚石】【WAV+CUE】
- Merryland《Merryland》[FLAC/分轨][170.22MB]
- 庄锭欣 ELKIE《没有你的未来》[320K/MP3][15.78MB]