title: how to make a component to get async data and to render server side?
body: <p>We know that only router component may request <code>asyncData</code> 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 <code>asyncData</code> for server side rendering.</p>
  
  <p>so i have used <code>created</code> 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?</p>
  
  <p><strong>App.vue - Main Component</strong></p>
  
  <pre><code>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');
    }
  }
  </code></pre>
  
  <p><strong>Action.js</strong></p>
  
  <pre><code>GET_PRELOAD_META_DATA: ({ commit }) =&gt; {
      return axios.get("api/preload").then(({ data }) =&gt; {
        commit('SET_PRELOAD_DATA', data);
      });
  },
  </code></pre>