Vue服务端渲染业务入门实践

作者：威威（沪江前端开发工程师）

本文原创，转载请注明作者及出处。

背景

最近， 产品同学一如往常笑嘻嘻的递来需求文档， 纵使内心万般拒绝， 身体倒是很诚实。 接过需求，好在需求不复杂， 简单构思 后决定用Vue， 得心应手。 切好图， 挽起袖子准备撸代码的时候， SEO同学不知何时已经站到了背后。

换以前， 估计只能无奈的换个实现方式， 但是Vue 2.0时代的到来， 给你多了一种可能。 你可以对SEO工程师说:用Vue没问题!

想必，很多前端同学都有类似这样的经历， 为了SEO，只能放弃得心应手的框架。 SEO(Search Engine Optimization)顾名思义就是一系列为了提高 网站收录排名，吸引精准用户的方案。 这么看来，SEO确实是有举足轻重的作用。 不过，好消息是，Vue2.0的发布为SEO提供了可能， 这就是SSR(serve side render)。

说起SSR，其实早在SPA (Single Page Application) 出现之前，网页就是在服务端渲染的。服务器接收到客户端请求后，将数据和模板拼接成完整的页面响应到客户端。 客户端直接渲染， 此时用户希望浏览新的页面，就必须重复这个过程， 刷新页面. 这种体验在Web技术发展的当下是几乎不能被接受的，于是越来越多的技术方案涌现，力求 实现无页面刷新或者局部刷新来达到优秀的交互体验。 比如Vue:

缺点大家自然猜到了， 对，主要的一点就是不利于SEO，或者说对SEO不友好。 来看下面两张图；

SPA页面的源代码

下图SSR页面的源代码

上面两张图就是使用了传统单页应用和SSR的页面源代码， 第一张图中，很明显页面的数据都是通过Ajax异步获取，然而搜索引擎度娘家的爬虫看到这样空旷的源码并不会丝毫留恋. 相反，通过服务端渲染的页面，就有很多对于爬虫来讲有效的连接. 毕竟度娘一家独大，看来服务端渲染确实有探究的必要了。

vue 的服务端渲染是怎么回事?

先看一张Vue官网的服务端渲染示意图

从图上可以看出，ssr 有两个入口文件，client.js 和 server.js， 都包含了应用代码，webpack 通过两个入口文件分别打包成给服务端用的 server bundle 和给客户端用的 client bundle. 当服务器接收到了来自客户端的请求之后，会创建一个渲染器 bundleRenderer，这个 bundleRenderer 会读取上面生成的 server bundle 文件，并且执行它的代码， 然后发送一个生成好的 html 到浏览器，等到客户端加载了 client bundle 之后，会和服务端生成的DOM 进行 Hydration(判断这个DOM 和自己即将生成的DOM 是否相同，如果相同就将客户端的vue实例挂载到这个DOM上， 否则会提示警告)。

怎么实现?

知道了Vue服务端渲染的大致流程，那怎么用代码来实现呢?

• 首先我们来创建一个 vue 实例

// app.js

    import Vue from 'vue';
    import router from './router';
    import store from './store';
    import App from './components/app';   

    let app = new Vue({
        template: '<app></app>'，
        base: '/c/'，
        components: {
            App
        }，
        router，
        store
    });

    export {
        app，
        router，
        store
    }

和我们以前写的vue实例差别不大，但是我们不会在这里将app mount到DOM上，因为这个实例也会在服务端去运行，这里直接将 app 暴露出去。

• 配置 vue 路由
  

  import Vue from 'vue';
  import VueRouter from 'vue-router';

  import IndexView from '../views/indexView';
  import ArticleItems from '../views/articleItems';

  Vue.use(VueRouter);

  const router = new VueRouter({
      mode: 'history'，
      base: '/c/'，
      routes: [
          {
              path: '/:alias'，
              component: IndexView
          }， {
              path: '/:alias/list'，
              component: ArticleItems
          }
      ]
  });

注意这里的 base，在服务端传递 path 给 vue-router 的时候要注意去掉前面的 '/c/'，否则会匹配不到。

• 创建视图组件，这里我们使用单文件组件，下面是 indexView.vue 文件的实例代码

<template>
      <div class="content">
          <course-cover :class-data="classData[0]"></course-cover>
          <article-items :article-items="articleItems"></article-items>
      </div>
  </template>

  <script>
      import courseCover from '../components/courseCover.vue';
      import articleItems from '../components/articleItems';

      export default {
          computed: {
              classData() {
                  return this.$store.state.courseListItems;
              }，
              articleItems() {
                  return this.$store.state.articleItems;
              }
          }，
          components: {
              courseCover，
              articleItems
          }，
          // 服务端获取数据
          fetchServerData ({ state， dispatch， commit }) {
              let alias = state.route.params.alias;

              return Promise.all([
                  dispatch('FETCH_ZT'， { alias })，
                  dispatch('FETCH_COURSE_ITEMS')，
                  dispatch('FETCH_ARTICLE_ITEMS')
              ])
          }，
          // 客户端获取数据
          beforeMount() {
              return this.$store.dispatch('FETCH_COURSE_ITEMS');
          }
      }
  </script>

这里我们暴露一个 fetchServerData 方法用来在服务端渲染时做数据的预加载，具体在哪调用，下面会讲到。 beforeMount 是vue的生命周期钩子函数，当应用在客户端切换到这个视图的时候会在特定的时候去执行，用于在客户端获取数据。

• 使用 vuex 管理数据，vue2.0 的服务端官方推荐使用 STORE 来管理数据，和1.0相比 api 有一些调整

  import Vue from 'vue';
  import Vuex from 'vuex';
  import axios from 'axios';

  Vue.use(Vuex);

  let apiHost = 'http://localhost:3000';

  const store = new Vuex.Store({
      state: {
          alias: ''，
          ztData: {}，
          courseListItems: []，
          articleItems: []
      }，
      actions: {
          FETCH_ZT: ({ commit， dispatch， state }， { alias }) = {
              commit('SET_ALIAS'， { alias });
              return axios.get(`${apiHost}/api/zt`)
                          .then(response => {
                              let data = response.data || {};
                              commit('SET_ZT_DATA'， data);
                          })
          }，
          FETCH_COURSE_ITEMS: ({ commit， dispatch， state }) => {
              return axios.get(`${apiHost}/api/course_items`).then(response => {
                  let data = response.data;
                  commit('SET_COURSE_ITEMS'， data);
              });
          }，
          FETCH_ARTICLE_ITEMS: ({ commit， dispatch， state }) => {
              return axios.get(`${apiHost}/api/article_items`)
                          .then(response => {
                              let data = response.data;
                              commit('SET_ARTICLE_ITEMS'， data);
                          })
          }
      }，
      mutations: {
          SET_COURSE_ITEMS: (state， data) => {
              state.courseListItems = data;
          }，
          SET_ALIAS: (state， { alias }) => {
              state.alias = alias;
          }，
          SET_ZT_DATA: (state， { ztData }) => {
              state.ztData = ztData;
          }，
          SET_ARTICLE_ITEMS: (state， items) => {
              state.articleItems = items;
          }
      }
  })

  export default store;

state 使我们应用层的数据，相当于一个仓库，整个应用层的数据都存在这里，与不使用vuex的vue应用有两点不同：

action 响应在view上的用户输入导致的状态变化，并不直接操作数据，异步的逻辑都封装在这里执行，它最终的目的是提交 mutation 来操作数据。 mutation vuex 中修改store 数据的唯一方法，使用 commit 来提交。

• 创建服务端的入口文件 server-entry.js

// server-entry.js
    import {app， router， store} from './app';

    export default context => {

        const s = Date.now();
        router.push(context.url);
        const matchedComponents = router.getMatchedComponents();
        if(!matchedComponents) {
            return Promise.reject({ code: '404' });
        }

        return Promise.all(
            matchedComponents.map(component => {
                if(component.fetchServerData) {
                    return component.fetchServerData(store);
                }
            })
        ).then(() => {
            context.initialState = store.state;
            return app;
        })
    }

server.js 返回一个函数，该函数接受一个从服务端传递过来的 context 的参数，将 vue 实例通过 promise 返回。 context 一般包含 当前页面的url，首先我们调用 vue-router 的 router.push(url) 切换到到对应的路由， 然后调用 getMatchedComponents 方法返回对应要渲染的组件， 这里会检查组件是否有 fetchServerData 方法，如果有就会执行它。

下面这行代码将服务端获取到的数据挂载到 context 对象上，后面会把这些数据直接发送到浏览器端与客户端的vue 实例进行数据(状态)同步。

`context.initialState = store.state`

创建客户端入口文件 client-entry.js

// client-entry.js
    import { app， store } from './app';
    import './main.scss';
    store.replaceState(window.__INITIAL_STATE__);
    app.$mount('#app');

客户端入口文件很简单，同步服务端发送过来的数据，然后把 vue 实例挂载到服务端渲染的 DOM 上。

• 配置 webpack

// webpack.server.config.js
    const base = require('./webpack.base.config'); // webpack 的通用配置
    module.exports = Object.assign({}， base， {
        target: 'node'，
        entry: './src/server-entry.js'，
        output: {
            filename: 'server-bundle.js'，
            libraryTarget: 'commonjs2'
        }，
        externals: Object.keys(require('../package.json').dependencies)，
        plugins: [
            new webpack.DefinePlugin({
            'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development')，
            'process.env.VUE_ENV': '"server"'
            })
        ]
    })

注意这里添加了 target: 'node' 和 libraryTarget: 'commonjs2'，然后入口文件改成我们的 server-entry.js， 客户端的 webpack 和以前一样，这里就不贴了。

• 分别打包服务端代码和客户端代码

因为有两个 webpack 配置文件，执行 webpack 时候就需要指定 --config 参数来编译不同的 bundle。 我们可以配置两个 npm script

    "packclient": "webpack --config webpack.client.config.js",
    "packserver": "webpack --config webpack.server.config.js"

然后在命令行运行

    npm run packclient
    npm run packserver

就会生成两个文件 client-bundle.js 和 server-bundle.js

• 创建服务端渲染器

// controller.js

  const serialize = require('serialize-javascript');
  // 因为我们在vue-router 的配置里面使用了 `base: '/c'`，这里需要去掉请求path中的 '/c'
  let url = this.url.replace(/\/c/, '');
  let context = { url: this.url };
  // 创建渲染器
  let bundleRenderer = createRenderer(fs.readFileSync(resolve('./dist/server-bundle.js')， 'utf-8'))
  let html = yield new Promise((resolve， reject) => {
      // 将vue实例编译成一个字符串
      bundleRenderer.renderToString(
          context，   // 传递context 给 server-bundle.js 使用
          (err， html) => {
              if(err) {
                  console.error('server render error'， err);
                  resolve('');
              }
              /**
               * 还记得在 server-entry.js 里面 `context.initialState = store.state` 这行代码么？
               * 这里就直接把数据发送到浏览器端啦
              **/
              html += `<script>
                          // 将服务器获取到的数据作为首屏数据发送到浏览器
                          window.__INITIAL_STATE__ = ${serialize(context.initialState， { isJSON: true })}
                      </script>`;
              resolve(html);
          }
      )
  })

  yield this.render('ssr'， html);

  // 创建渲染器函数
  function createRenderer(code) {
      return require('vue-server-renderer').createBundleRenderer(code);
  }

在 node 的 views 模板文件中只需要将上面的 html 输出就可以了

// ssr.html
    {% extends 'layout.html' %}
    {% block body %}
        {{ html | safe }}
    {% endblock %}

    <script src="/public/client.js"></script>

这样，一个简单的服务端渲染就结束了，限于篇幅，详细的代码请参考 Github代码库。

https://github.com/pangz1/vue-ssr

小结

整个demo包含了：

没有涉及：

对Vue的服务端渲染有更深一步的认识，实际在生产环境中的应用可能还需要考虑很多因素。

选择Vue的服务端渲染方案，是情理之中的选择，不是对新技术的盲目追捧，而是一切为了需要。 Vue 2.0的SSR方案只是提供了一种可能，多了一种选择，框架本身在于服务开发者，根据不同的场景选择不同的方案，才会事半功倍。

文章仅代表个人观点，有不妥当地方烦请大家指出，共同进步！