Static GitHub Issues

[202] NuxtServerInit is not working well

prev: Question: How to change JS/CSS filenames?
next: Question about fetch data

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)
    }
  }
<!--cmty--><!--cmty_prevent_hook--><div align="right"><sub><em>This question is available on <a href="https://nuxtjs.cmty.io">Nuxt.js</a> community (<a href="https://nuxtjs.cmty.io/nuxt/nuxt.js/issues/c171">#c171</a>)</em></sub></div>