为了追求更好的用户体验,很多公司的业务页面都会采用SSR进行渲染,将渲染的结果返回给浏览器,浏览器能够不经过实例化Vue,直接解析HTML代码展示,这样可以减少首屏时间,提高用户体验。
0.Server Side Render使用
0.1上手SSR
Vue
提供一个npm
包叫做vue-server-renderer
,它是在vue
源码中的server
目录中单独打包出来作为服务端渲染的依赖包,包的名称已经讲清楚了它的作用:作为一个服务端渲染器,将Vue
实例中所有需要展示的内容进行渲染。
举一个很简单的服务端渲染例子:
const Vue = require('vue')
const server = require('express')()
const renderer = require('vue-server-renderer').createRenderer();
server.get('*', (req, res) => {
// 实例化一个Vue
const app = new Vue({
template: `<div>Server Render</div>`,
})
// 将vue实例进行渲染生成html,并且拼凑为HTML代码返回
renderer.renderToString(app, (err, html) => {
if (err) {
res.status(500).end('Internal Server Error')
return
}
res.end(`
<!DOCTYPE html>
<html lang="en">
<head><title>Hello</title></head>
<body>${
html}</body>
</html>
`)
})
})
server.listen(8080)
使用renderer
在普通实例上面进行渲染成为一个字符串并且返回。
ssr就这么简单?肯定不是。
要知道在Server环境下,一个服务会接收很多请求。那么上面例子会导致很多请求都共享一个Vue实例。现在的程序比较复杂,需要借用到store来进行保存状态:
const Vue = require('vue')
const server = require('express')()
const renderer = require('vue-server-renderer').createRenderer();
const store = new Vuex.Store({
state: {
count: 1
},
mutations: {
increment(state) {
state.count++;
}
}
})
server.get('*', (req, res)