#default prefetch not working

8 messages · Page 1 of 1 (latest)

hybrid fableBOT
#

Hi @scarlet tide. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

The behavior you're experiencing is expected based on the Astro's prefetch configuration. The defaultStrategy option in the prefetch configuration of your astro.config.mjs file sets the default prefetch strategy for links that have the data-astro-prefetch attribute but no value specified. In your case, you've set it to 'tap', which means that links with data-astro-prefetch and no value will prefetch just before you click on the link.

However, if you don't specify the data-astro-prefetch attribute on a link, the default behavior is 'hover', which means the link will prefetch when you hover over or focus on the link. This is why you're seeing prefetching occur when you hover over a link.

If you want to change the prefetch strategy for a specific link, you can do so by setting a value on the data-astro-prefetch attribute. For example, if you want a link to prefetch just before you click on it, you can add data-astro-prefetch="tap" to the link:

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

If you want to prefetch all links on the page using the 'tap' strategy, you can set prefetch.prefetchAll to true in your astro.config.mjs file:

import { defineConfig } from 'astro/config';
export default defineConfig({
  prefetch: {
    prefetchAll: true,
    defaultStrategy: 'tap'
  }
});

Then, all links on the page will prefetch just before you click on them, unless you specify a different strategy for a particular link or opt out of prefetching for a link by setting data-astro-prefetch="false".

#

Sources:

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@scarlet tide kapa.ai is still learning and improving, please let us know how it did by reacting below

scarlet tide
#

@hybrid fable i added: ```json
prefetch: {
prefetchAll: true,
defaultStrategy: 'tap'
},

but it still prefetches on hover even though i have no data  prefetch attribute on the element
hybrid fableBOT
#

Let me check the knowledge base for you. One moment! :books:

#

The behavior you're experiencing seems to be a misunderstanding of how the prefetch configuration works in Astro. The defaultStrategy option sets the default prefetch strategy for links that have the data-astro-prefetch attribute but no value specified. It does not change the default behavior for links without the data-astro-prefetch attribute.

When you set prefetchAll to true, Astro will prefetch all links on the page, including those without the data-astro-prefetch attribute. However, the prefetch strategy for these links will still be 'hover', which is the default behavior. This means that these links will prefetch when you hover over or focus on them, regardless of the defaultStrategy you've set.

If you want to change the prefetch strategy for a specific link, you can do so by adding the data-astro-prefetch attribute with the desired strategy as the value. For example, if you want a link to prefetch just before you click on it, you can add data-astro-prefetch="tap" to the link:

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

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

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

Sources:

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: