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?