vue ssr 指南详读

vue ssr 指南详读

本帖说明

该贴是对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 = ''

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), http://{

maxAge: cache && isProd ? 60 * 60 * 24 * 30 : 0

})

app.use('/dist', serve('./dist'))

app.get('*', (req, res) => {

if (!renderer) {

return res.end('waiting for compilation... refresh in a moment.')

}

res.setHeader('Content-Type', 'text/html')

res.setHeader('Server', serverInfo)

var s = Date.now()

const context = { url: req.url }

/*

渲染vue实例，context对象上下文

*/

const renderStream = renderer.renderToStream(context)

renderStream.once('data', () => {

res.write(indexHTML.head)

})

renderStream.on('data', chunk => {

res.write(chunk)

})

renderStream.on('end', () => {

if (context.initialState) {

res.write(

``

)

}

res.end(indexHTML.tail)

console.log(`whole request: ${Date.now() - s}ms`)

})

renderStream.on('error', err => {

if (err && err.code === '404') {

res.status(404).end('404 | Page Not Found')

return

}

res.status(500).end('Internal Error 500')

console.error(`error during render : ${req.url}`)

console.error(err)

})

})

const port = process.env.PORT || 8080

app.listen(port, () => {

console.log(`server started at localhost:${port}`)

})

服务端vue实例入口文件，通过上下文对象获取请求的url，映射给对应的组件。

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') 可以清楚看到

**/

app.$mount('#app')

})

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。