DEV Community

Cover image for Implementing Prefetching in Vue apps
Jakub Andrzejewski
Jakub Andrzejewski

Posted on

13

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.

Prefetching in Vue

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>


Enter fullscreen mode Exit fullscreen mode

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>


Enter fullscreen mode Exit fullscreen mode

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:

Vue School Link

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 πŸ–₯️

Do your career a big favor. Join DEV. (The website you're on right now)

It takes one minute, it's free, and is worth it for your career.

Get started

Community matters

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

πŸ‘‹ Kindness is contagious

Explore a sea of insights with this enlightening post, highly esteemed within the nurturing DEV Community. Coders of all stripes are invited to participate and contribute to our shared knowledge.

Expressing gratitude with a simple "thank you" can make a big impact. Leave your thanks in the comments!

On DEV, exchanging ideas smooths our way and strengthens our community bonds. Found this useful? A quick note of thanks to the author can mean a lot.

Okay