Vue 服务端渲染（SSR）

旧城等待， 2022-01-14 14:21 315阅读 0赞

[2019独角兽企业重金招聘Python工程师标准>>> ][2019_Python_] ![hot3.png][]

## Vue 服务端渲染（SSR） ##

什么是服务端渲染，简单理解是将组件或页面通过服务器生成html字符串，再发送到浏览器，最后将静态标记"混合"为客户端上完全交互的应用程序。于传统的SPA（单页应用）相比，服务端渲染能更好的有利于SEO，减少页面首屏加载时间，当然对开发来讲我们就不得不多学一些知识来支持服务端渲染。同时服务端渲染对服务器的压力也是相对较大的，和服务器简单输出静态文件相比，通过node去渲染出页面再传递给客户端显然开销是比较大的，需要注意准备好相应的服务器负载。

### 一、一个简单的例子 ###

1.  `// 第 1 步：创建一个 Vue 实例`
2.  `const Vue = require('vue')`
3.  `const app = new Vue({`
4.  ``template: `<div>Hello World</div>` ``
5.  `})`
6.  `// 第 2 步：创建一个 renderer`
7.  `const renderer = require('vue-server-renderer').createRenderer()`
8.  `// 第 3 步：将 Vue 实例渲染为 HTML`
9.  `renderer.renderToString(app, (err, html) => {`
10. `if (err) throw err`
11. `console.log(html)`
12. `// => <div data-server-rendered="true">Hello World</div>`
13. `})`

上面例子利用 `vue-server-renderer` npm 包将一个vue示例最后渲染出了一段 html。将这段html发送给客户端就轻松的实现了服务器渲染了。

1.  `const server = require('express')()`
2.  `server.get('*', (req, res) => {`
3.  `// ... 生成 html`
4.  `res.end(html)`
5.  `})`
6.  `server.listen(8080)`

### 二、官方渲染步骤 ###

上面例子虽然简单，但在实际项目中往往还需要考虑到路由，数据，组件化等等，所以服务端渲染不是只用一个 `vue-server-renderer` npm包就能轻松搞定的，下面给出一张Vue官方的服务器渲染示意图：

![1][]

流程图大致意思是：将 Source（源码）通过 webpack 打包出两个 bundle，其中 Server Bundle 是给服务端用的，服务端通过渲染器 bundleRenderer 将 bundle 生成 html 给浏览器用；另一个 Client Bundle 是给浏览器用的，别忘了服务端只是生成前期首屏页面所需的 html ，后期的交互和数据处理还是需要能支持浏览器脚本的 Client Bundle 来完成。

### 三、具体怎么实现 ###

实现过程就是将上面的示意图转化成代码实现，不过这个过程还是有点小复杂的，需要多点耐心去推敲每个细节。

#### 1、先实现一个基本版 ####

项目结构示例：

1.  `├── build`
2.  `│ ├── webpack.base.config.js # 基本配置文件`
3.  `│ ├── webpack.client.config.js # 客户端配置文件`
4.  `│ ├── webpack.server.config.js # 服务端配置文件`
5.  `└── src`
6.  `├── router`
7.  `│ └── index.js # 路由`
8.  `└── views`
9.  `│ ├── comp1.vue # 组件`
10. `│ └── copm2.vue # 组件`
11. `├── App.vue # 顶级 vue 组件`
12. `├── app.js # app 入口文件`
13. `├── client-entry.js # client 的入口文件`
14. `├── index.template.html # html 模板`
15. `├── server-entry.js # server 的入口文件`
16. `├── server.js # server 服务`

其中：

（1）、comp1.vue 和 copm2.vue 组件

1.  `<template>`
2.  `<section>组件 1</section>`
3.  `</template>`
4.  `<script>`
5.  `export default {`
6.  `data () {`
7.  `return {`
8.  `msg: ''`
9.  `}`
10. `}`
11. `}`
12. `</script>`

（2）、App.vue 顶级 vue 组件

1.  `<template>`
2.  `<div id="app">`
3.  `<h1>vue-ssr</h1>`
4.  `<router-link class="link" to="/comp1">to comp1</router-link>`
5.  `<router-link class="link" to="/comp2">to comp2</router-link>`
6.  
7.  `<router-view class="view"></router-view>`
8.  `</div>`
9.  `</template>`
10. 
11. `<style lang="stylus">`
12. `.link`
13. `margin 10px`
14. `</style>`

（3）、index.template.html html 模板

1.  `<!DOCTYPE html>`
2.  `<html lang="zh_CN">`
3.  `<head>`
4.  `<title>{ { title }}</title>`
5.  `<meta charset="utf-8"/>`
6.  `<meta name="mobile-web-app-capable" content="yes"/>`
7.  `<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1"/>`
8.  `<meta name="renderer" content="webkit"/>`
9.  `<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui"/>`
10. `<meta name="theme-color" content="#f60"/>`
11. `</head>`
12. `<body>`
13. ``
14. `</body>`
15. `</html>`

（4）、上面基础代码不解释，接下来看

路由 router

1.  `import Vue from 'vue'`
2.  `import Router from 'vue-router'`
3.  `import comp1 from '../views/comp1.vue'`
4.  `import comp2 from '../views/comp2.vue'`
5.  `Vue.use(Router)`
6.  `export function createRouter () {`
7.  `return new Router({`
8.  `mode: 'history',`
9.  `scrollBehavior: () => ({ y: 0 }),`
10. `routes: [`
11. `{`
12. `path: '/comp1',`
13. `component: comp1`
14. `},`
15. `{`
16. `path: '/comp2',`
17. `component: comp2`
18. `},`
19. `{ path: '/', redirect: '/comp1' }`
20. `]`
21. `})`
22. `}`

app.js app 入口文件

1.  `import Vue from 'vue'`
2.  `import App from './App.vue'`
3.  `import { createRouter } from './router'`
4.  
5.  `export function createApp (ssrContext) {`
6.  `const router = createRouter()`
7.  `const app = new Vue({`
8.  `router,`
9.  `ssrContext,`
10. `render: h => h(App)`
11. `})`
12. `return { app, router }`
13. `}`

我们通过 `createApp` 暴露一个根 Vue 实例，这是为了确保每个用户能得到一份新的实例，避免状态污染，所以我们写了一个可以重复执行的工厂函数 `createApp`。 同样路由 router 我们也是一样的处理方式 `createRouter` 来暴露一个 router 实例

（5）client-entry.js client 的入口文件

1.  `import { createApp } from './app'`
2.  
3.  `const { app, router } = createApp()`
4.  `router.onReady(() => {`
5.  `app.$mount('#app')`
6.  `})`

客户端代码是在路由解析完成的时候讲 app 挂载到 \#app 标签下

（7）server-entry.js server 的入口文件

1.  `import { createApp } from './app'`
2.  
3.  `export default context => {`
4.  `// 因为这边 router.onReady 是异步的，所以我们返回一个 Promise`
5.  `// 确保路由或组件准备就绪`
6.  `return new Promise((resolve, reject) => {`
7.  `const { app, router } = createApp(context)`
8.  `router.push(context.url)`
9.  `router.onReady(() => {`
10. `resolve(app)`
11. `}, reject)`
12. `})`
13. `}`

服务器的入口文件我们返回了一个 promise

#### 2、打包 ####

在第一步我们大费周章实现了一个带有路由的日常功能模板代码，接着我们需要利用webpack将上面的代码打包出服务端和客户端key的代码，入口文件分别是 `server-entry.js` 和 `client-entry.js`

（1）、 webpack构建配置

一般配置分为三个文件：base, client 和 server。基本配置(base config)包含在两个环境共享的配置，例如，输出路径(output path)，别名(alias)和 loader。服务器配置(server config)和客户端配置(client config)，可以通过使用 webpack-merge 来简单地扩展基本配置。

> webpack.base.config.js 配置文件

1.  `const path = require('path')`
2.  `const webpack = require('webpack')`
3.  `const ExtractTextPlugin = require('extract-text-webpack-plugin')`
4.  
5.  `module.exports = {`
6.  `devtool: '#cheap-module-source-map',`
7.  `output: {`
8.  `path: path.resolve(__dirname, '../dist'),`
9.  `publicPath: '/dist/',`
10. `filename: '[name]-[chunkhash].js'`
11. `},`
12. `resolve: {`
13. `alias: {`
14. `'public': path.resolve(__dirname, '../public'),`
15. `'components': path.resolve(__dirname, '../src/components')`
16. `},`
17. `extensions: ['.js', '.vue']`
18. `},`
19. `module: {`
20. `noParse: /es6-promise\.js$/,`
21. `rules: [`
22. `{`
23. `test: /\.(js|vue)/,`
24. `use: 'eslint-loader',`
25. `enforce: 'pre',`
26. `exclude: /node_modules/`
27. `},`
28. `{`
29. `test: /\.vue$/,`
30. `use: {`
31. `loader: 'vue-loader',`
32. `options: {`
33. `preserveWhitespace: false,`
34. `postcss: [`
35. `require('autoprefixer')({`
36. `browsers: ['last 3 versions']`
37. `})`
38. `]`
39. `}`
40. `}`
41. `},`
42. `{`
43. `test: /\.js$/,`
44. `use: 'babel-loader',`
45. `exclude: /node_modules/`
46. `},`
47. `{`
48. `test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,`
49. `use: {`
50. `loader: 'url-loader',`
51. `options: {`
52. `limit: 10000,`
53. `name: 'img/[name].[hash:7].[ext]'`
54. `}`
55. `}`
56. `},`
57. `{`
58. `test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,`
59. `use: {`
60. `loader: 'url-loader',`
61. `options: {`
62. `limit: 10000,`
63. `name: 'fonts/[name].[hash:7].[ext]'`
64. `}`
65. `}`
66. `},`
67. `{`
68. `test: /\.css$/,`
69. `use: ['vue-style-loader', 'css-loader']`
70. `},`
71. `{`
72. `test: /\.json/,`
73. `use: 'json-loader'`
74. `}`
75. `]`
76. `},`
77. `performance: {`
78. `maxEntrypointSize: 300000,`
79. `hints: 'warning'`
80. `},`
81. `plugins: [`
82. `new webpack.optimize.UglifyJsPlugin({`
83. `compress: { warnings: false }`
84. `}),`
85. `new ExtractTextPlugin({`
86. `filename: 'common.[chunkhash].css'`
87. `})`
88. `]`
89. `}`

> webpack.client.config.js 配置文件

1.  `const path = require('path')`
2.  `const webpack = require('webpack')`
3.  `const merge = require('webpack-merge')`
4.  `const base = require('./webpack.base.config')`
5.  `const glob = require('glob')`
6.  `const VueSSRClientPlugin = require('vue-server-renderer/client-plugin')`
7.  
8.  `const config = merge(base, {`
9.  `entry: {`
10. `app: './src/client-entry.js'`
11. `},`
12. `resolve: {`
13. `alias: {`
14. `'create-api': './create-api-client.js'`
15. `}`
16. `},`
17. `plugins: [`
18. `new webpack.DefinePlugin({`
19. `'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development'),`
20. `'process.env.VUE_ENV': '"client"',`
21. `'process.env.DEBUG_API': '"true"'`
22. `}),`
23. `new webpack.optimize.CommonsChunkPlugin({`
24. `name: 'vendor',`
25. `minChunks: function (module) {`
26. `return (`
27. `/node_modules/.test(module.context) && !/\.css$/.test(module.require)`
28. `)`
29. `}`
30. `}),`
31. `new webpack.optimize.CommonsChunkPlugin({`
32. `name: 'manifest'`
33. `}),`
34. `// 这是将服务器的整个输出`
35. `// 构建为单个 JSON 文件的插件。`
36. ``// 默认文件名为 `vue-ssr-server-bundle.json` ``
37. `new VueSSRClientPlugin()`
38. `]`
39. `})`
40. `module.exports = config`

> webpack.server.config.js 配置文件

1.  `const path = require('path')`
2.  `const webpack = require('webpack')`
3.  `const merge = require('webpack-merge')`
4.  `const base = require('./webpack.base.config')`
5.  `const nodeExternals = require('webpack-node-externals')`
6.  `const VueSSRServerPlugin = require('vue-server-renderer/server-plugin')`
7.  
8.  `module.exports = merge(base, {`
9.  `target: 'node',`
10. `devtool: '#source-map',`
11. `entry: './src/server-entry.js',`
12. `output: {`
13. `filename: 'server-bundle.js',`
14. `libraryTarget: 'commonjs2'`
15. `},`
16. `resolve: {`
17. `alias: {`
18. `'create-api': './create-api-server.js'`
19. `}`
20. `},`
21. `externals: nodeExternals({`
22. `whitelist: /\.css$/`
23. `}),`
24. `plugins: [`
25. `new webpack.DefinePlugin({`
26. `'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development'),`
27. `'process.env.VUE_ENV': '"server"'`
28. `}),`
29. `new VueSSRServerPlugin()`
30. `]`
31. `})`

webpack 配置完成，其实东西也不多，都是常规配置。需要注意的是 `webpack.server.config.js` 配置，output是生成一个 commonjs 的 library， `VueSSRServerPlugin` 用于这是将服务器的整个输出构建为单个 JSON 文件的插件。

（2）、 webpack build poj

build 代码

1.  `webpack --config build/webpack.client.config.js`
2.  `webpack --config build/webpack.server.config.js`
3.

打包后会生成一些打包文件，其中 server.config 打包后会生成 `vue-ssr-server-bundle.json` 文件，这个文件是给 `createBundleRenderer` 用的,用于服务端渲染出 html 文件

1.  `const { createBundleRenderer } = require('vue-server-renderer')`
2.  `const renderer = createBundleRenderer('/path/to/vue-ssr-server-bundle.json', {`
3.  `// ……renderer 的其他选项`
4.  `})`

细心的你还会发现 client.config 不仅生成了一下客服端用的到 js 文件，还会生成一份 `vue-ssr-client-manifest.json` 文件,这个文件是客户端构建清单，服务端拿到这份构建清单找到一下用于初始化的js脚步或css注入到 html 一起发给浏览器。

（3）、 服务端渲染

其实上面都是准备工作，最重要的一步是将webpack构建后的资源代码给服务端用来生成 html 。我们需要用node写一个服务端应用，通过打包后的资源生成 html 并发送给浏览器

server.js

1.  `const fs = require('fs')`
2.  `const path = require('path')`
3.  `const Koa = require('koa')`
4.  `const KoaRuoter = require('koa-router')`
5.  `const serve = require('koa-static')`
6.  `const { createBundleRenderer } = require('vue-server-renderer')`
7.  `const LRU = require('lru-cache')`
8.  
9.  `const resolve = file => path.resolve(__dirname, file)`
10. `const app = new Koa()`
11. `const router = new KoaRuoter()`
12. `const template = fs.readFileSync(resolve('./src/index.template.html'), 'utf-8')`
13. 
14. `function createRenderer (bundle, options) {`
15. `return createBundleRenderer(`
16. `bundle,`
17. `Object.assign(options, {`
18. `template,`
19. `cache: LRU({`
20. `max: 1000,`
21. `maxAge: 1000 * 60 * 15`
22. `}),`
23. `basedir: resolve('./dist'),`
24. `runInNewContext: false`
25. `})`
26. `)`
27. `}`
28. 
29. `let renderer`
30. `const bundle = require('./dist/vue-ssr-server-bundle.json')`
31. `const clientManifest = require('./dist/vue-ssr-client-manifest.json')`
32. `renderer = createRenderer(bundle, {`
33. `clientManifest`
34. `})`
35. 
36. `/**`
37. `* 渲染函数`
38. `* @param ctx`
39. `* @param next`
40. `* @returns {Promise}`
41. `*/`
42. `function render (ctx, next) {`
43. `ctx.set("Content-Type", "text/html")`
44. `return new Promise (function (resolve, reject) {`
45. `const handleError = err => {`
46. `if (err && err.code === 404) {`
47. `ctx.status = 404`
48. `ctx.body = '404 | Page Not Found'`
49. `} else {`
50. `ctx.status = 500`
51. `ctx.body = '500 | Internal Server Error'`
52. ``console.error(`error during render : ${ctx.url}`)``
53. `console.error(err.stack)`
54. `}`
55. `resolve()`
56. `}`
57. `const context = {`
58. `title: 'Vue Ssr 2.3',`
59. `url: ctx.url`
60. `}`
61. `renderer.renderToString(context, (err, html) => {`
62. `if (err) {`
63. `return handleError(err)`
64. `}`
65. `console.log(html)`
66. `ctx.body = html`
67. `resolve()`
68. `})`
69. `})`
70. `}`
71. 
72. `app.use(serve('/dist', './dist', true))`
73. `app.use(serve('/public', './public', true))`
74. 
75. `router.get('*', render)`
76. `app.use(router.routes()).use(router.allowedMethods())`
77. 
78. `const port = process.env.PORT || 8089`
79. `app.listen(port, '0.0.0.0', () => {`
80. ``console.log(`server started at localhost:${port}`)``
81. `})`

这里我们用到了最开始 demo 用到的 `vue-server-renderer` npm 包，通过读取 `vue-ssr-server-bundle.json` 和 `vue-ssr-client-manifest.json` 文件 renderer 出 html，最后 `ctx.body = html` 发送给浏览器, 我们试着`console.log(html)` 出 html 看看服务端到底渲染出了何方神圣：

1.  `<!DOCTYPE html>`
2.  `<html lang="zh_CN">`
3.  `<head>`
4.  `<title>Vue Ssr 2.3</title>`
5.  `<meta charset="utf-8"/>`
6.  `<meta name="mobile-web-app-capable" content="yes"/>`
7.  `<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1"/>`
8.  `<meta name="renderer" content="webkit"/>`
9.  `<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui"/>`
10. `<meta name="theme-color" content="#f60"/>`
11. `<link rel="preload" href="/dist/manifest-56dda86c1b6ac68c0279.js" as="script"><link rel="preload" href="/dist/vendor-3504d51340141c3804a1.js" as="script"><link rel="preload" href="/dist/app-ae1871b21fa142b507e8.js" as="script"><style data-vue-ssr-id="41a1d6f9:0">`
12. `.link {`
13. `margin: 10px;`
14. `}`
15. `</style><style data-vue-ssr-id="7add03b4:0"></style></head>`
16. `<body>`
17. 
18. `<div id="app" data-server-rendered="true">`
19. `<h1>vue-ssr</h1>`
20. `<a href="/comp1" class="link router-link-exact-active router-link-active">to comp1</a>`
21. `<a href="/comp2" class="link">to comp2</a>`
22. `<section class="view">组件 1</section>`
23. `</div>`
24. 
25. `<script src="/dist/manifest-56dda86c1b6ac68c0279.js" defer>`
26. `</script>`
27. `<script src="/dit/vendor-3504d51340141c3804a1.js" defer></script>`
28. `<script src="/dist/app-ae1871b21fa142b507e8.js" defer></script>`
29. `</body>`
30. `</html>`

可以看到服务端把路由下的 `组件 1` 也给渲染出来了，而不是让客服端去动态加载，其次是 html 也被注入了一些 <script 标签去加载对应的客户端资源。这里再多说一下，有的同学可能不理解，服务端渲染不就是最后输出 html 让浏览器渲染吗，怎么 html 还带 js 脚本，注意，服务端渲染出的 html 只是首次展示给用户的页面而已，用户后期操作页面处理数据还是需要 js 脚本去跑的，也就是 webpack 为什么要打包出一套服务端代码（用于渲染首次html用），一套客户端代码（用于后期交互和数据处理用）

### 四、小结 ###

本篇简单了解了 vue ssr 的简单流程，上面例子的demo放在[github][] 欢迎提 issue 和 star 。服务端渲染还有比较重要的一部分是首屏数据的获取渲染，一般页面展示都会有一些网络数据初始化，服务端渲染可以将这些数据获取到插入到 html ，由于这部份内容涉及到的知识点也不少，放在下次讲。

### 2018-5-28 更新 ###

评论区提到的bug已经修复，如果有其他问题可以到github对应的工程下提 issues，github 的 issues 有 markdown 格式，方便问题描述和讨论，问题描述可以尽量清楚，方面作者排查问题原因

### 运行项目 ###

1.  `npm run install`
2.  `npm run build:client // 生成 clientBundle`
3.  `npm run build:server // 生成 serverBundle`
4.  `npm run dev // 启动 node 渲染服务`

转载于:https://my.oschina.net/jack088/blog/1928181

[2019_Python_]: https://my.oschina.net/u/2663968/blog/3061697
[hot3.png]: /images/20220114/2591c67ed4a748898753652efae097db.png
[1]: https://user-gold-cdn.xitu.io/2018/3/5/161f3e369a32ba11?imageView2/0/w/1280/h/960/format/webp/ignore-error/1
[github]: https://link.juejin.im/?target=https%3A%2F%2Fgithub.com%2FZengTianShengZ%2FMy-Blog%2Ftree%2Fmaster%2F%25E6%259C%258D%25E5%258A%25A1%25E7%25AB%25AF%25E6%25B8%25B2%25E6%259F%2593-Vue-ssr