Defer the rendering of Vue.js pages until the data request is completed

Question

Defer the rendering of Vue.js pages until the data request is completed

I am currently working on a page that retrieves data from the server using axios.

My goal is to wait for the axios request to complete before rendering the page content.

The reason behind this approach is that I already have a prerendered version of the page. While the axios request is in progress, I prefer to display the prerendered data instead of leaving the screen blank (to avoid CLS issues).

This is my current implementation:

export default {

  ....

  created() {
    this.fetchData().then((returnedData) => this.personData = returnedData);
  },

  data() {
    return {
      personData: {
        name: "",
      },
    };
  },

  methods: {
    async fetchData() {
      const response = await axios.get("api/persondata/");
      return await response.data;
    },
  },

  ...

}

Essentially, I am looking for a way to turn the axios request into a "synchronous" operation or find a method to make the created() function wait until the request is completed.

An ideal scenario would involve preventing the rendering process altogether and displaying the prerendered page if the axios request fails.

Do you have any suggestions on how to achieve this?

javascript vue.js vuejs2 axios

Answer 1

Answer №1

To ensure that the data is loaded before displaying it, you can use a v-if statement rather than v-show. This will prevent any errors from occurring when attempting to access values in your response object that may not exist yet.

<template>
  <div v-if="!isLoading">
    Show your updated data here
  </div>
  <div v-else>
    Show your pre-rendered data here
  </div>
</template>

export default {

  data() {
    return {
      personData: {
        name: "",
      },
      isLoading: true
    };
  },

  methods: {
    async fetchData() {
      const response = await axios.get("api/persondata/");
      return await response.data;
    },
  },
  async mounted(){
     this.personData = await this.fetchData()
     this.isLoading = false
  }
}

It's recommended to wrap your code in try/catch blocks to handle any potential errors that may arise.

Based on my experience working on large Vue projects, using this method along with components for rendering and formatting data tends to be more effective than relying solely on the router. While router hooks are suitable for smaller applications, they can become less manageable when additional features like page access tools or global routing functionality are needed.

A common pattern involves: View -> reading ID parameter -> passing it to a component for data rendering -> component fetching data via axios based on ID. Even if the route parameter changes (without changing the route itself), your component will still update accordingly with the parameter change.

Answer 2

To ensure that the data is loaded before displaying it, you can use a v-if statement rather than v-show. This will prevent any errors from occurring when attempting to access values in your response object that may not exist yet.

<template>
  <div v-if="!isLoading">
    Show your updated data here
  </div>
  <div v-else>
    Show your pre-rendered data here
  </div>
</template>

export default {

  data() {
    return {
      personData: {
        name: "",
      },
      isLoading: true
    };
  },

  methods: {
    async fetchData() {
      const response = await axios.get("api/persondata/");
      return await response.data;
    },
  },
  async mounted(){
     this.personData = await this.fetchData()
     this.isLoading = false
  }
}

It's recommended to wrap your code in try/catch blocks to handle any potential errors that may arise.

Based on my experience working on large Vue projects, using this method along with components for rendering and formatting data tends to be more effective than relying solely on the router. While router hooks are suitable for smaller applications, they can become less manageable when additional features like page access tools or global routing functionality are needed.

A common pattern involves: View -> reading ID parameter -> passing it to a component for data rendering -> component fetching data via axios based on ID. Even if the route parameter changes (without changing the route itself), your component will still update accordingly with the parameter change.

Defer the rendering of Vue.js pages until the data request is completed

Answer №1

Similar questions

In MUI v5 React, the scroll bar vanishes from view when the drawer is open

Troubleshooting issue with Next.JS Redux dispatch functionality inside getStaticProps() not functioning as

Converting a string to regular text in JavaScript (specifically in ReactJS)

Mapping URLs to objects in JavaScript, TypeScript, and Angular4

Having trouble configuring individual route files in Express JS

Activate ajax search in select2 by hand

Using Vue.js to create numerous modal popups

Protractor's Get Attribute Value function may return null after updating the Chrome version

Tips for choosing a dynamically generated ajax element

Converting coordinates of latitude and longitude into JSON format

Combining input streams using node.js and ffmpeg

Which specific indexOf method is the most appropriate for my use case?

Interpreting an undefined HTTP GET request within a Node.js server

The Ajax readyState consistently displaying a value of 0

Retrieve the XML file from the webpage and save it to a specific directory using Java and the Selenium framework with the Chrome browser

Extracting web search result URLs using Puppeteer

Using multiple selectors in JQuery and Javascript

Utilizing JavaScript to Incorporate Node Packages

Determining the most appropriate time to utilize the 'async' built-in function in ES2017 versus implementing 'npm i async' can depend on a variety of factors such

Include a header in every Apollo query