Astro JS - Prefetching

---

---

What is Prefetching?

The prefetching is a performance optimization technique, that loads new routes, page assets, and other media in the background before the user clicks on a link. This technique can help to reduce the loading time of the next page and provide a better user experience. In this chapter, we will learn how to use prefetching in Astro and types of prefetching strategies.

Enabling Prefetching

To enable prefetching in Astro, you need to set the prefetch option to true in the astro.config.mjs file. Here is an example of how to enable prefetching in Astro:

// File: astro.config.mjs

import { defineConfig } from 'astro/config';

export default defineConfig({
    prefetch: true
});

Prefetch Strategies

Astro supports 4 prefetch strategies for various use cases:

• hover (default): Prefetch when you hover over or focus on the link.
• tap: Prefetch just before you click on the link.
• viewport: Prefetch as the links enter the viewport.
• load: Prefetch all links on the page after the page is loaded.

You can specify the strategy of prefetching for any individual link by passing it to the data-astro-prefetch attribute:

<a href="/about" data-astro-prefetch="tap">About</a>

Each strategy is optimized to only prefetch when needed and save your bandwidth. For example:

• If a visitor is using data saver mode or has a slow connection, prefetch will fallback to the tap strategy.
• Quickly hovering or scrolling over links will not prefetch them.

Default Prefetch Strategy

The default prefetch strategy is "hover". You can change this by configuring prefetch.defaultStrategy in your astro.config.mjs file:

// File: astro.config.mjs

import { defineConfig } from 'astro/config';

export default defineConfig({
    prefetch: {
      defaultStrategy: 'viewport'
    }
});

Prefetch Every Links

If you want to prefetch all links, including those without the data-astro-prefetch attribute, you can set prefetch.prefetchAll to true:

// File: astro.config.mjs

import { defineConfig } from 'astro/config';

export default defineConfig({
    prefetch: {
      prefetchAll: true
    }
});

Disable Prefetching

If you want to disable prefetching for a specific link, you can set the data-astro-prefetch attribute to "false":

<a href="/about" data-astro-prefetch="false">About</a>

Prefetch Programmatically

Sometimes, you may want to navigate user to a page based on some event, such as a button click. This is called programmatic navigation. You can prefetch a page programmatically using the prefetch() API from the astro:prefetch module:

<button id="btn">Click me</button>

<script>
    import { prefetch } from 'astro:prefetch';

    const btn = document.getElementById('btn');
    btn.addEventListener('click', () => {
        prefetch('/about');
    });
</script>