理解vue ssr原理并自己搭建简单的ssr框架

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中
  })
 ]});

第三步：启动服务