Egg Vue SSR 服务端渲染数据请求与asyncData

Egg Vue SSR 是一个基于 Egg.js 和 Vue.js 的服务端渲染项 目，它能够将 Vue.js 组件在服务端渲染完成之后再返回给客户端，在一定程度上可以提高页面的首屏渲染速度和搜索引擎的爬取效果。为了更好的支持服务端渲染，Egg Vue SSR 提供了异步数据请求方法 asyncData。

asyncData 是在服务端执行的方法，而非在浏览器端执行，它可以用来获取组件所需的异步数据，可以与 Vue 的生命周期钩子一起使用。在渲染过程中，asyncData 可以将数据注入到组件的 data 中，从而避免在异步获取数据完成之前呈现空的组件。

以下是 Egg Vue SSR 中使用 asyncData 的完整攻略：

安装依赖

在 Egg Vue SSR 项目中使用 asyncData，需要先安装依赖vuex 和 vue-router：

npm install vuex vue-router --save

创建 Store 储存数据

为了方便在组件中全局调用，可以先在服务端创建一个 Vuex Store，用于储存公共的数据。

在组件中定义 asyncData 方法

在组件中，定义 asyncData 方法用来获取异步数据。asyncData 方法接收一个 context 参数，该参数将包含一些有用的信息，例如请求对象、route对象等。L azy Load Components 可以完美复用 asyncData 模块，因为每个 module 都可以独立的到处 asyncData，并且异步请求以静态方法的形式回传到组件内部。

在服务器端请求 asyncData 数据

在服务器端，可以利用 Vuex 官方提供的 Actions 要求 dispatch 方法来进行数据请求。 在 Egg Vue SSR 中，可以通过在 Context 关联上一个 Vue SSR Renderer 实例，然后由 Renderer 实例触发 asyncData 方法来进行数据获取。

以下是一个 Egg Vue SSR 中的 asyncData 示例代码：

// 在 store 中进行异步数据获取

const actions = {
  async fetchPost({
    commit
  }, payload) {
    const {
      postid
    } = payload
    const post = await api.get(`/post/${postid}`)
    commit('setPost', post)
  }
}

export default new Vuex.Store({
  state: {},
  mutations: {},
  actions
})


// 在组件中定义 asyncData 方法

import {
  mapActions,
  mapState
} from 'vuex'

export default {
  name: 'Post',
  async asyncData({
    store,
    route
  }) {
    const {
      params
    } = route
    await store.dispatch('fetchPost', {
      postid: params.id
    })
    return {}
  },
  computed: {
    ...mapState(['post'])
  },

  methods: {
    ...mapActions(['fetchPost'])
  }
}

// 在服务器端请求 asyncData 数据

export default app => {
  const renderer = app.view.createRenderer({
    template: require('fs').readFileSync(resolve(__dirname, './app.html'), 'utf-8')
  })
  app.get('*', async (req, res) => {
    const context = {
      title: 'Egg Vue SSR',
      url: req.url
    }
    const vueOptions = {
      data: {
        title: 'Egg Vue SSR',
        url: req.url
      },
      asyncData: this.$options.asyncData
    }
    const app = new Vue({
      data: vueOptions.data,
      router: createRouter(),
      store: createStore(),
      render: h => h(App, [
        h('div', {
          attrs: {
            id: 'app'
          },
          domProps: {
            innerHTML: '',
          },
        }),
      ]),
    })
    await renderer.renderToString(app, context)
    res.write(context.state)
    res.end()
  })
}

在这个示例中，我们首先在 store 中定义了一个 fetchPost actions，用于获取 post 数据。然后在组件中，定义了asyncData 方法，用来调度 fetchPost 方法，在获取 post 数据之后将结果存储到 post state 中。

最后，我们在服务器端请求 asyncData 数据，利用 Vue SSR Renderer 实例在执行时触发 asyncData 方法，将所得数据存储到 Context state之中，最终使用到页面 SSR 渲染过程中。