Nuxt.js: NuxtServerInit is not working well

[surmon-china]

My question is this:
One of my projects is like this,
I need to render this data before rendering on the server side, and I've tried to launch an action on the vuex in the component. I'm trying to get the data from the sidebar and the sidebar, but I'm not going to change it anymore. , But will actually prompt a red error, so I defined the action in the nuxtServerInit, this function, I return a Promise object, which contains the sidebar I need to obtain data components of the asynchronous request, the work is now the case, NuxtServerInit driven asynchronous functions can work, the console can see the information, but in the server-side rendering data is given before, whether the data is properly rendered depends on whether I currently load the page itself contains asynchronous requests, such as fetch Or data method, if the current page to be loaded, there is no asynchronous data, then the server rendering page may not wait nuxtServerInit asynchronous function driven by the work done before rendering, so I can only asynchronous data in each Request a page component plus a fetch or data, which uses a timer to simulate an asynchronous, the only way to my page to meet the expected, normal work; I hope you can give a better solution

Nuxt.js very good, I am happy to be able to use it!
thank you

// actions
  async nuxtServerInit({ dispatch }) {
    console.log('nuxtServerInit dispatch')
    const loaded = await dispatch('loadAppInitNeed')
    console.log('nuxtServerInit loaded', loaded)
  },

  loadAppInitNeed({ dispatch }) {
    return Promise.all([
      dispatch('loadTagList'),
      dispatch('loadAppOptions'),
    ]);
  },

  loadAppOptions({ commit }) {
    commit('option/REQUEST_OPTIONS')
    Service.get('/option')
    .then(response => {
      console.log('get options success')
      const success = Object.is(response.statusText, 'OK')
      if(success) commit('option/REQUEST_SUCCESS', response.data)
      if(!success) commit('option/REQUEST_FAILURE')
    })
    .catch(err => {
      commit('option/REQUEST_FAILURE', err)
    })
  },

  loadTagList({ commit }, params = {}) {
    commit('tag/REQUEST_LIST')
    Service.get('/tag', { params })
    .then(response => {
      console.log('get tags success')
      const success = Object.is(response.statusText, 'OK')
      if(success) commit('tag/GET_LIST_SUCCESS', response.data)
      if(!success) commit('tag/GET_LIST_FAILURE')
    })
    .catch(err => {
      commit('tag/GET_LIST_FAILURE', err)
    })
  },

  // ...

export default {
    name: 'guestbook',
    head: {
      title: 'Guestbook',
    },
    data ({ req }, callback) {
      setTimeout(() => {
        console.log('guestbook success');
        callback(null, {})
      }, 100)
    }
  }

_{This question is available on Nuxt.js community (#c171)}

[Atinux]

Hi @surmon-china

By looking at your code, loadAppOptions and loadTagList don't return a Promise.

Here you code fixed:

  loadAppOptions({ commit }) {
    commit('option/REQUEST_OPTIONS')
    return Service.get('/option')
    .then(response => {
      console.log('get options success')
      const success = Object.is(response.statusText, 'OK')
      if(success) commit('option/REQUEST_SUCCESS', response.data)
      if(!success) commit('option/REQUEST_FAILURE')
    })
    .catch(err => {
      commit('option/REQUEST_FAILURE', err)
    })
  },

  loadTagList({ commit }, params = {}) {
    commit('tag/REQUEST_LIST')
    return Service.get('/tag', { params })
    .then(response => {
      console.log('get tags success')
      const success = Object.is(response.statusText, 'OK')
      if(success) commit('tag/GET_LIST_SUCCESS', response.data)
      if(!success) commit('tag/GET_LIST_FAILURE')
    })
    .catch(err => {
      commit('tag/GET_LIST_FAILURE', err)
    })
  },

[surmon-china]

nice job! thank you very much!!

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.