vue-server-renderer
最基本的用法是使用 vue-server-renderer 创建渲染器render
render提供一个方法将vue对象渲染成html字符串
const Vue = require('vue')
const server = require('express')()
const renderer = require('vue-server-renderer').createRenderer()
server.get('*', (req, res) => {
const app = new Vue({
data: {
url: req.url
},
template: `<div>访问的 URL 是： {{ url }}</div>`
})
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)
更好的选择是使用vue-server-renderer提供的createBundleRenderer去创建渲染器，因为它可以提供更复杂的功能（下文有讲），并且支持热加载（否则每次代码一改，就得重启服务）
防止数据污染
如果我们在多个请求之间使用一个共享的vue实例，很容易导致交叉请求状态污染(比如两客户端a,b同时请求某个页面，服务端对两个请求，分别查询数据库a,b的信息，如果是使用同一个实例，假设a的数据先查出来，然后渲染的时候b的数据查出来了，那么最终返回给a和b的渲染结果都是b的数据渲染结果)
为了避免这种情况，可以写一个工厂函数用于生成vue实例，针对每个请求都去调用该函数生成一个新的vue实例
// app.js
const Vue = require('vue')
module.exports = function createApp (context) {
return new Vue({
data: {
url: context.url
},
template: `<div>访问的 URL 是： {{ url }}</div>`
})
}
客户端激活
服务端渲染出来的只是一个静态html，需要在客户端使用vue对象对静态html进行激活
因为单纯静态html无法响应vue对象的数据变化和绑定的各种事件，所以需要进行激活
import { createApp } from './app'
const { app } = createApp()
// 在客户端使用此方法进行激活
app.$mount('#app')
数据预取
如果想服务端返回的静态html是根据动态数据渲染的结果，就需要在服务端进行数据预取
这是通过服务端路由时调用匹配的组件内的asyncData函数
并且此函数调用在组件实例化之前，因此函数内部无法使用this,但函数会接收到store对象，所以可以将数据存在store内
<!-- Item.vue -->
<template>
<div>{{ item.title }}</div>
</template>
<script>
export default {
asyncData ({ store, route }) {
// 触发 action 后，会返回 Promise
return store.dispatch('fetchItem', route.params.id)
},
computed: {
// 从 store 的 state 对象中的获取 item。
item () {
return this.$store.state.items[this.$route.params.id]
}
}
}
</script>
// entry-server.js
import { createApp } from './app'
export default context => {
return new Promise((resolve, reject) => {
const { app, router, store } = createApp()
router.push(context.url)
router.onReady(() => {
const matchedComponents = router.getMatchedComponents()
if (!matchedComponents.length) {
return reject({ code: 404 })
}
// 对所有匹配的路由组件调用 `asyncData()`
Promise.all(matchedComponents.map(Component => {
if (Component.asyncData) {
return Component.asyncData({
store,
route: router.currentRoute
})
}
})).then(() => {
// 在所有预取钩子(preFetch hook) resolve 后，
// 我们的 store 现在已经填充入渲染应用程序所需的状态。
// 当我们将状态附加到上下文，
// 并且 `template` 选项用于 renderer 时，
// 状态将自动序列化为 `window.__INITIAL_STATE__`，并注入 HTML。
context.state = store.state
resolve(app)
}).catch(reject)
}, reject)
})
}
context.state 将作为 window.INITIAL_STATE 状态，自动嵌入到最终的 HTML 中
而后在客户端激活时
// entry-client.js
const { app, router, store } = createApp()
// 这一步要在激活之前
if (window.__INITIAL_STATE__) {
store.replaceState(window.__INITIAL_STATE__)
}
app.$mount('#app')
在一种特殊情况下会出错，比如template里有如下代码
<div v-if="$route.query && $route.query.test">fdsaf</div>
服务端解析时认为$route.query && $route.query.test为false，但如果客户端打开时在url后加了test参数，那客户端初始化时认为这个条件是true，就会导致服务端渲染出来的dom树和客户端初始状态对应的dom树不一致，可能会导致解析出错
如果一定要有这样的代码，可以把v-if换成v-show，这样至少dom树结构是一致的，当vue对象挂载过程中真实使用这个dom时不会报错
但最好是对这个条件做一个延迟赋值，比如：
<div v-if="showDom">fdsaf</div>
...
data(){
showDom: false
},
// mounted在服务端不会执行，所以服务端和客户端都认为初始值是false
// 客户端执行到mounted时进行动态赋值，而这时vue对象已挂载到dom树上，所以可以对数据的修改做响应，可以动态改变dom树了
mounted(){
this.showDom = this.$route.query && this.$route.query.test
}
客户端、服务端编译
因为服务端需要解析vue对象，而node不能直接使用webpack的各种loader，所以需要在服务端进行编译
先使用各种loader加载并解析好各文件
入口文件为entry-server.js
使用插件：vue-server-renderer/server-plugin，可以将服务端配置编译成一个json文件
const merge = require('webpack-merge')
const nodeExternals = require('webpack-node-externals')
const baseConfig = require('./webpack.base.config.js')
const VueSSRServerPlugin = require('vue-server-renderer/server-plugin')
module.exports = merge(baseConfig, {
// 将 entry 指向应用程序的 server entry 文件
entry: '/path/to/entry-server.js',
// 这允许 webpack 以 Node 适用方式(Node-appropriate fashion)处理动态导入(dynamic import)，
// 并且还会在编译 Vue 组件时，
// 告知 `vue-loader` 输送面向服务器代码(server-oriented code)。
target: 'node',
// 对 bundle renderer 提供 source map 支持
devtool: 'source-map',
// 此处告知 server bundle 使用 Node 风格导出模块(Node-style exports)
output: {
libraryTarget: 'commonjs2'
},
// https://webpack.js.org/configuration/externals/#function
// https://github.com/liady/webpack-node-externals
// 外置化应用程序依赖模块。可以使服务器构建速度更快，
// 并生成较小的 bundle 文件。
externals: nodeExternals({
// 不要外置化 webpack 需要处理的依赖模块。
// 你可以在这里添加更多的文件类型。例如，未处理 *.vue 原始文件，
// 你还应该将修改 `global`（例如 polyfill）的依赖模块列入白名单
whitelist: /\.css$/
}),
// 这是将服务器的整个输出
// 构建为单个 JSON 文件的插件。
// 默认文件名为 `vue-ssr-server-bundle.json`
plugins: [
new VueSSRServerPlugin()
]
})
而因为要做客户端激活，所以需要针对客户端也做一次编译，入口文件为entry-client.js
使用插件：vue-server-renderer/client-plugin，可以将客户端配置编译成一个json文件
const webpack = require('webpack')
const merge = require('webpack-merge')
const baseConfig = require('./webpack.base.config.js')
const VueSSRClientPlugin = require('vue-server-renderer/client-plugin')
module.exports = merge(baseConfig, {
entry: '/path/to/entry-client.js',
plugins: [
// 重要信息：这将 webpack 运行时分离到一个引导 chunk 中，
// 以便可以在之后正确注入异步 chunk。
// 这也为你的 应用程序/vendor 代码提供了更好的缓存。
new webpack.optimize.CommonsChunkPlugin({
name: "manifest",
minChunks: Infinity
}),
// 此插件在输出目录中
// 生成 `vue-ssr-client-manifest.json`。
new VueSSRClientPlugin()
]
})
得到服务端、客户端配置文件后，就可以模块的依赖关系
使用vue-server-renderer提供的createBundleRenderer可以通过配置文件和一个模板html文件生成渲染器render，
此渲染器通过分析配置文件得知模块的依赖关系，从而自动在模板html中通过插入script标签的方式注入对js模块的引用
const { createBundleRenderer } = require('vue-server-renderer')
const template = require('fs').readFileSync('/path/to/template.html', 'utf-8')
const serverBundle = require('/path/to/vue-ssr-server-bundle.json')
const clientManifest = require('/path/to/vue-ssr-client-manifest.json')
const renderer = createBundleRenderer(serverBundle, {
template,
clientManifest
})
通过render生成的html文件格式如下
<html>
<head>
<!-- 用于当前渲染的 chunk 会被资源预加载(preload) -->
<link rel="preload" href="/manifest.js" as="script">
<link rel="preload" href="/main.js" as="script">
<link rel="preload" href="/0.js" as="script">
<!-- 未用到的异步 chunk 会被数据预取(prefetch)（次要优先级） -->
<link rel="prefetch" href="/1.js" as="script">
</head>
<body>
<!-- 应用程序内容 -->
<div data-server-rendered="true"><div>async</div></div>
<!-- manifest chunk 优先 -->
<script src="/manifest.js"></script>
<!-- 在主 chunk 之前注入异步 chunk -->
<script src="/0.js"></script>
<script src="/main.js"></script>
</body>
</html>
网友评论