CODEWITHSUNDEEP
vue.jsvue-componentvue-ssr
Mukund Kumar
Mukund Kumar

Reputation: 23211

how to make a component to get async data and to render server side?

We know that only router component may request asyncData in a ssr environment. i have one main component(not router component), i need some async data to render server side. because it is not router component, so i can't use asyncData for server side rendering.

so i have used created hook for calling async api, but component hook is synchronous and don't wait for promise. what to do for getting async data on server side?

App.vue - Main Component

export default {
  components: {
    footer: Footer,
    header: Header,
    selector: selector
  },
  beforeMount() {
    // need preload metadata here
  },
  created () {
    // it return preload metadata as response.
    return this.$store.dispatch('GET_PRELOAD_META_DATA');
  }
}

Action.js

GET_PRELOAD_META_DATA: ({ commit }) => {
    return axios.get("api/preload").then(({ data }) => {
      commit('SET_PRELOAD_DATA', data);
    });
},

Upvotes: 1

Views: 1703

Answers (1)

Spence_omz
Spence_omz

Reputation: 11

As of Vue 2.6, there is a new SSR feature that may accomplish what you’re trying to do. ServerPrefetch is now a hook that can resolve promises to get async data and can interact with a global store.

Check out more in their documentation. https://ssr.vuejs.org/api/#serverprefetch

(I know this an old post, but I stumbled upon it while googling and thought I might be able to help someone else googling too)

Upvotes: 1

Related Questions