Implementing Prefetching in Vue apps

Recently I was investigating what I could do in one of my project to improve performance (or at least perceived performance) so that it will be better for the users. The problem was that I had a list of records where at the bottom of it, there was a button to load more records and the problem is that the API takes significant amount of time to process the request so user needed to scroll down to the page and then wait until the execution of the load more button.

Then I realized that I could utilize concept known to me from Nuxt framework called prefetching. The idea of this concept is to fetch required resources before user actually does some action so that the response seems instant. Let's take a look at the following graph that will help you understand it.

In short words, we will be sending a request under the hood for the next resources so that when user clicks the load more button, they will instantly see the result. This can significantly improve the perceived performance and user experience but we have to rememeber that there are some edge cases that we should be aware of that I will mention at the end of this article.

Enjoy!

🟢 Implementing Prefetching in Vue

Implementation of this pattern can vary from application to application so I will be using an imaginary example app so that you will understand the concept and you will be able to implement it yourself.

First, lets imagine that we have a following code in our Vue page/component

<script setup lang="ts">
const records = ref([]);

async function fetchRecords() {
  records.value = await api.getRecords()
}

async function loadMoreRecords () {
  const newRecords = await api.getRecords(params)
  records.value = records.value.push(newRecords)
}

onMounted(async () => {
  await fetchRecords()
})
</script>

Then, let's imagine that we want to add prefetching to this code. We would need to modify it as following:

<script setup lang="ts">
const records = ref([]);
const prefetchedRecords = ref([]);

async function fetchRecords() {
  records.value = await api.getRecords()
  prefetchRecords()
}

function prefetchRecords() {
  prefetchedRecords.value = api.getRecords(params) // start prefetching 
}

async function loadMoreRecords () {
  if (prefetchedRecords.value.length) {
    // if we have prefetched records, let's use them in to extend the list with new records
    records.value = records.value.push(prefetchedRecords.value)
    prefetchedRecords.value = []
    prefetchRecords()
  } else {
    // otherwise, just do what we were doing before
    const newRecords = await api.getRecords(params)
    records.value = records.value.push(newRecords)
  }
}

onMounted(async () => {
  await fetchRecords()
})
</script>

This way, we could prefetch new records at the time when user will be scrolling the page to the load more button and then load records instantly.

We have to remember however that this pattern comes with some issues for example what should happen if a user scrolls down and clicks load more faster that the prefetch request can be fulfilled? In this case, we should either abort previous request and start a new one (like it would work normally before implementing prefetching) or (a better option) would be to wait until the request will be fulfilled showing user a loading indicator - because most probably some part of the request was already handled so there is no need to abort it.
Also another case would be that if you have resources that are being added dynamically (down the page there are newer not older results) this concept can lead to wrong results because you will display cached results that are not the newest ones. For that, you could implement global polling that I have an article about here

📖 Learn more

If you would like to learn more about Vue, Nuxt, JavaScript or other useful technologies, checkout VueSchool by clicking this link or by clicking the image below:

It covers most important concepts while building modern Vue or Nuxt applications that can help you in your daily work or side projects 😉

✅ Summary

Well done! You have just learned how to use the concept of prefetching to improve perceived performance.

Take care and see you next time!

And happy coding as always 🖥️