Dieser Inhalt ist noch nicht in deiner Sprache verfügbar.
Page load times play a big role in the usability and overall enjoyment of a site. Astro’s opt-in prefetching brings the benefits of near-instant page navigations to your multi-page application (MPA) as your visitors interact with the site.
Enable prefetchingSection titled Enable prefetching
You can enable prefetching with the
A prefetch script will be added to all pages of your site. You can then add the
data-astro-prefetch attribute to any
<a /> links on your site to opt-in to prefetching. When you hover over the link, the script will fetch the page in the background.
Note that prefetching only works for links within your site, and not external links.
Prefetch configurationSection titled Prefetch configuration
prefetch config also accepts an option object to further customize prefetching.
Prefetch strategiesSection titled 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 a strategy for an individual link by passing it to the
Each strategy is fine-tuned to only prefetch when needed and save your users’ bandwidth. For example:
- If a visitor is using data saver mode or has a slow connection, prefetch will fallback to the
- Quickly hovering or scrolling over links will not prefetch them.
- Links that use the
loadstrategy are prefetched with a lower priority to avoid clogging up the network.
Default prefetch strategySection titled Default prefetch strategy
The default prefetch strategy when adding the
data-astro-prefetch attribute is
hover. To change it, you can configure
prefetch.defaultStrategy in your
Prefetch all links by defaultSection titled Prefetch all links by default
If you want to prefetch all links, including those without the
data-astro-prefetch attribute, you can set
You can then opt-out of prefetching for individual links by setting
The default prefetch strategy for all links can be changed with
prefetch.defaultStrategy as shown in the Default prefetch strategy section.
Prefetch programmaticallySection titled Prefetch programmatically
As some navigation might not always appear as
<a /> links, you can also prefetch programmatically with the
prefetch() API from the
You can additionally configure the priority of prefetching by passing the
To ignore slow connection detection, you can use the
Make sure to only import
prefetch() in client-side scripts as it relies on browser APIs.
Using with View TransitionsSection titled Using with View Transitions
You can customize the prefetch configuration in
astro.config.mjs to override the default. For example:
Migrating from Section titled Migrating from @astrojs/prefetch
@astrojs/prefetch integration was deprecated in v3.5.0 and will eventually be removed entirely. Use the following instructions to migrate to Astro’s built-in prefetching which replaces this integration.
@astrojs/prefetchintegration and enable the
@astrojs/prefetch’s configuration options:
The deprecated integration used the
selectorconfig option to specify which links should be prefetched upon entering the viewport.
data-astro-prefetch="viewport"to these individual links instead.
The deprecated integration used the
intentSelectorconfig option to specify which links should be prefetched when they were hovered over or focused.
data-astro-prefetch="hover"to these individual links instead:
@astrojs/prefetchis no longer needed as the new prefetch feature will automatically schedule and prefetch optimally.