使用Vue-ssr提供服务端渲染html卡片服务

本文记录一个实现服务端渲染html卡片服务的例子，使用vue-ssr加express实现服务

什么是服务器端渲染(SSR)

Vue.js 是构建客户端应用程序的框架。默认情况下，可以在浏览器中输出 Vue 组件，进行生成 DOM 和操作 DOM。然而，也可以将同一个组件渲染为服务器端的 HTML 字符串，将它们直接发送到浏览器，最后将这些静态标记"激活"为客户端上完全可交互的应用程序。

搭建vue工程

利用 webpack 搭建一个简单的 vue 开发环境
结构如下：

router 和 store 以及 vue 都采用了工厂函数来生成实例，这是为了方便代码在后面的服务端渲染中进行复用，因为 “Node.js 服务器是一个长期运行的进程。必须为每个请求创建一个新的 Vue 实例”
app.js:

import Vue from 'vue'
import App from './App.vue'
import { createRouter } from './routes'
import { createStore } from './stores'
import { sync } from 'vuex-router-sync'
// 导出一个工厂函数，用于创建新的
// 应用程序、router 和 store 实例
export function createApp () {
  // 创建 router 和 store 实例
  const router = createRouter()
  const store = createStore()

  // 同步路由状态(route state)到 store
  sync(store, router)

  // 创建应用程序实例，将 router 和 store 注入
  const app = new Vue({
    router,
    store,
    render: h => h(App)
  })
  return { router, app, store }
  // return { app }
}

实现服务端渲染

安装：
npm install vue vue-server-renderer --save

实现服务端渲染，需增加如下 webpack 配置：
webpack.server.conf.js:

const path = require('path')
const webpack = require('webpack')
const merge = require('webpack-merge')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const VueSSRServerPlugin = require('vue-server-renderer/server-plugin')

const baseWebpackConfig = require('./webpack.client.conf')
const config = require('./config')

module.exports = merge(baseWebpackConfig, {
  entry: './src/entry-server.js',
  // 告知 `vue-loader` 输送面向服务器代码(server-oriented code)。
  target: 'node',
  output: {
    filename: 'server-bundle.js',
    libraryTarget: 'commonjs2',
  },
  plugins: [
     new VueSSRServerPlugin()
  ]
})

为服务端渲染准备的入口文件：
entry-server.js：

import { createApp } from './app'
// 这里的 context 是服务端渲染模板时传入的
export default context => {
  // 因为有可能会是异步路由钩子函数或组件，所以我们将返回一个 Promise，
  // 以便服务器能够等待所有的内容在渲染前，
  // 就已经准备就绪。
  return new Promise((resolve, reject) => {
    const { app, router, store } = createApp()

    const { url } = context
    const { fullPath } = router.resolve(url).route

    if (fullPath !== url) {
      return reject({ url: fullPath })
    }

    router.push(url)

    // 等到 router 将可能的异步组件和钩子函数解析完
    router.onReady(() => {
      const matchedComponents = router.getMatchedComponents()
      // 匹配不到的路由，执行 reject 函数，并返回 404
      if (!matchedComponents.length) {
        return reject({ code: 404 })
      }

      // 执行所有组件中的异步数据请求
      Promise.all(matchedComponents.map(({ asyncData }) => asyncData && 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)
  })
}

编译一下，运行 npm run build:server ，将会在 dist 目录下得到 vue-ssr-server-bundle.json 文件。该文件包含了 webpack 打包生成的所有 chunk 并指定了入口。后面服务端会基于该文件来做渲染。

编写服务端渲染代码，使用express做服务容器：
server.js:

const Vue = require('vue')
 const express = require('express')
 const bodyParser = require('body-parser')
 const fs = require('fs')
 const path = require('path')
 const { createBundleRenderer } = require('vue-server-renderer')
 const bundle = require('./dist/vue-ssr-server-bundle.json')
 const server = express()

 const renderer = createBundleRenderer(bundle, {
   template: fs.readFileSync('./index.template.html', 'utf-8')
 })

// 这个方法返回一个仅仅用来解析json格式的中间件。这个中间件能接受任何body中任何Unicode编码的字符。支持自动的解析gzip和 zlib。
server.use(bodyParser.json());
// 这个方法也返回一个中间件，这个中间件用来解析body中的urlencoded字符，只支持utf-8的编码的字符。同样也支持自动的解析gzip和 zlib。
server.use(bodyParser.urlencoded({ extended: false }));

// 服务端渲染
server.get('*', (req, res) => {
  const context = { url: req.originalUrl }
  renderer.renderToString(context, (err, html) => {
    if (err) {
      if (err.code === 404) {
        res.status(404).end('Page not found')
      } else {
        res.status(500).end('Internal Server Error')
      }
    } else {
      res.end(html)
    }
  })
})

server.listen(8081)

使用上面生成的文件创建了一个 renderer 对象，然后调用其 renderToString 方法并传入包含请求路径的对象作为参数来进行渲染，最后将渲染好的数据即 html 返回。

编写服务端渲染的卡片模板

robot_baike.vue

文本内容可处理后直接渲染到页面节点，但图形js插件生成的图形则需要在客户端进行渲染。
可以将绘图代码放入一个 < script> 标签，拼装为字符串，用v-html拼入页面中，则在客户端会执行此绘图代码生成图形。

最后配置下路由：
routes/inex.js

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
export function createRouter () {
  return new Router({
    mode: 'history',
    routes: [
      { path: '/baike', component: () => import('COMPONENTS/robot_baike') }
    ]
  })
}

运行 npm run server 启动服务端，打开 http://localhost:8081/baike 就可以看到效果了。