理解vue ssr原理，本身搭建简单的ssr框架

前言

大多数Vue项目要支持SSR应该是为了SEO考虑，毕竟对于WEB应用来讲，搜索引擎是一个很大的流量入口。Vue SSR如今已经比较成熟了，可是若是是把一个SPA应用改形成SSR应用，成本仍是有些高的，这工做量无异于重构前端。另外对前端的技术要求也是挺高的，须要对Vue比较熟悉，还要有Node.js 和 webpack 的应用经验。

引入

Vue是一个构建客户端应用的框架，即vue组件是在浏览器中进行渲染的。所谓服务端渲染，指的是把vue组件在服务器端渲染为组装好的HTML字符串，而后将它们直接发送到浏览器，最后须要将这些静态标记"激活"为客户端上彻底可交互的应用程序。

服务端渲染的优势

1. 更好的SEO，搜索引擎爬虫能够抓取渲染好的页面

2. 更快的内容到达时间（首屏加载更快），由于服务端只须要返回渲染好的HTML，这部分代码量很小的，因此用户体验更好

服务端渲染的缺点

1. 首先就是开发成本比较高，好比某些声明周期钩子函数（如beforeCreate、created）能同时运行在服务端和客户端，所以第三方库要作特殊处理，才能在服务器渲染应用程序中运行。

2. 因为服务端渲染要用Nodejs作中间层，因此部署项目时，须要处于Node.js server运行环境。在高流量环境下，还要作好服务器负载和缓存策略

原理解析

先附上demo地址：github.com/wmui/vue-ss…

第一步：编写entry-client.js和entry-server.js

entry-client.js只在浏览器环境下执行，因此须要显示调用$mount方法，挂载DOM节点

import Vue from 'vue';
import App from './App.vue';
import createStore from './store/index.js';

function createApp() {
  const store = createStore();
  const app = new Vue({
      store,
      render: h => h(App)
  });
  return {app, store}
}

const { app, store } = createApp();

// 使用window.__INITIAL_STATE__中的数据替换整个state中的数据，这样服务端渲染结束后，客户端也能够自由操做state中的数据
if (window.__INITIAL_STATE__) {
  store.replaceState(window.__INITIAL_STATE__);
}

app.$mount('#app');

复制代码

entry-server.js须要导出一个函数，在服务端渲染期间会被调用

import Vue from 'vue';
import App from './App.vue';
import createStore from './store/index.js';

export default function(context) {
  // context是上下文对象
  const store = createStore();
  let app = new Vue({
    store,
    render: h => h(App)
  });

  // 找到全部 asyncData 方法
  let components = App.components;
  let asyncDataArr = []; // promise集合
  for (let key in components) {
    if (!components.hasOwnProperty(key)) continue;
    let component = components[key];
    if (component.asyncData) {
      asyncDataArr.push(component.asyncData({store})) // 把store传给asyncData
    }
  }
  // 全部请求并行执行
  return Promise.all(asyncDataArr).then(() => {
    // context.state 赋值成什么，window.__INITIAL_STATE__ 就是什么
    // 这下你应该明白entry-client.js中window.__INITIAL_STATE__是哪来的了，它是在服务端渲染期间被添加进上下文的
    context.state = store.state;
    return app;
  });
};
复制代码

上面的asyncData是干吗用的？其实，这个函数是专门请求数据用的，你可能会问请求数据为何不在beforeCreate或者created中完成，还要专门定义一个函数？虽然beforeCreate和created在服务端也会被执行（其余周期函数只会在客户端执行），可是咱们都知道请求是异步的，这就致使请求发出后，数据还没返回，渲染就已经结束了，因此没法把 Ajax 返回的数据也一并渲染出来。所以须要想个办法，等到全部数据都返回后再渲染组件

asyncData须要返回一个promise，这样就能够等到全部请求都完成后再渲染组件。下面是在foo组价中使用asyncData的示例，在这里完成数据的请求

export default {
  asyncData: function({store}) {
    return store.dispatch('GET_ARTICLE') // 返回promise
  },
  computed: {
    article() {
      return this.$store.state.article
    }
  }
}
复制代码

第二步：配置webpack

webpack配置比较简单，可是也须要针对client和server端单独配置

webpack.client.conf.js显然是用来打包客户端应用的

module.exports = merge(base, {
  entry: {
    client: path.join(__dirname, '../entry-client.js')
  }
});
复制代码

webpack.server.conf.js用来打包服务端应用，这里须要指定node环境

module.exports = merge(base, {
  target: 'node', // 指定是node环境
  entry: {
    server: path.join(__dirname, '../entry-server.js')
  },
  output: {
    filename: '[name].js', // server.js
    libraryTarget: 'commonjs2' // 必须按照 commonjs规范打包才能被服务器调用。
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.join(__dirname, '../index.ssr.html'),
      filename: 'index.ssr.html',
      files: {
        js: 'client.js'
      }, // client.js须要在html中引入
      excludeChunks: ['server'] // server.js只在服务端执行，因此不能打包到html中
    })
  ]
});
复制代码

第三步：启动服务

打包完成后就能够启动服务了，在start.js中咱们须要把server.js加载进来，而后经过renderToString方法把渲染好的html返回给浏览器

const bundle = fs.readFileSync(path.resolve(__dirname, 'dist/server.js'), 'utf-8');
const renderer = require('vue-server-renderer').createBundleRenderer(bundle, {
  template: fs.readFileSync(path.resolve(__dirname, 'dist/index.ssr.html'), 'utf-8') // 服务端渲染数据
});


server.get('*', (req, res) => {
  renderer.renderToString((err, html) => {
    // console.log(html)
    if (err) {
      console.error(err);
      res.status(500).end('服务器内部错误');
      return;
    }
    res.end(html);
  })
});

复制代码

效果图

demo已经上传到github： github.com/wmui/vue-ss…

结语

我的实践Vue SSR已有一段时间，发现要想搭建一套完整的 SSR 服务框架仍是颇有挑战的，或许 Nuxt 是一个不错的选择，对 Nuxt 感兴趣的朋友能够参考个人一个开源小做品Essay

以上，感谢阅读！