title: Vue.js - defer page rendering until data request finishes
body: <p>I have a page which displays data fetched from server with axios.</p>
  <p>I want to defer the page rendering until the axios request finishes.</p>
  <p>The reason for this is that I have a prerendered version of the page. So while the axios request is still running, I would like to display the prerendered data instead of a blank screen (to prevent CLS issues).</p>
  <p>This is what I have currently:</p>
  <pre><code>export default {
  
    ....
  
    created() {
      this.fetchData().then((returnedData) =&gt; this.personData = returnedData);
    },
  
    data() {
      return {
        personData: {
          name: &quot;&quot;,
        },
      };
    },
  
    methods: {
      async fetchData() {
        const response = await axios.get(&quot;api/persondata/&quot;);
        return await response.data;
      },
    },
  
    ...
  
  }
  </code></pre>
  <p>So basically what I want to do is to make the axios request &quot;synchronous&quot;, or to somehow make the <code>create()</code> function wait until the request finishes.</p>
  <p>An ideal scenario would be to prevent the rendering all-together and just display the prerendered page, in case the axios request fails.</p>
  <p>Any ideas on how to do this?</p>