|
| 1 | +--- |
| 2 | +title: Prefetch |
| 3 | +description: Prefetch links for snappier navigation between pages. |
| 4 | +i18nReady: true |
| 5 | +--- |
| 6 | + |
| 7 | +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. |
| 8 | + |
| 9 | +## Enable prefetching |
| 10 | + |
| 11 | +You can enable prefetching with the `prefetch` config: |
| 12 | + |
| 13 | +```js title="astro.config.js" ins={4} |
| 14 | +import { defineConfig } from 'astro/config'; |
| 15 | + |
| 16 | +export default defineConfig({ |
| 17 | + prefetch: true |
| 18 | +}) |
| 19 | +``` |
| 20 | + |
| 21 | +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. |
| 22 | + |
| 23 | +```html |
| 24 | +<a href="/about" data-astro-prefetch> |
| 25 | +``` |
| 26 | + |
| 27 | +Note that prefetching only works for links within your site, and not external links. |
| 28 | + |
| 29 | +## Prefetch configuration |
| 30 | + |
| 31 | +The `prefetch` config also accepts an option object to further customize prefetching. |
| 32 | + |
| 33 | +### Prefetch strategies |
| 34 | + |
| 35 | +Astro supports 3 prefetch strategies for various use cases: |
| 36 | + |
| 37 | +- `hover` (default): Prefetch when you hover over or focus on the link. |
| 38 | +- `tap`: Prefetch just before you click on the link. |
| 39 | +- `viewport`: Prefetch as the links enter the viewport. |
| 40 | + |
| 41 | +You can specify a strategy for an individual link by passing it to the `data-astro-prefetch` attribute: |
| 42 | + |
| 43 | +```html |
| 44 | +<a href="/about" data-astro-prefetch="tap">About</a> |
| 45 | +``` |
| 46 | + |
| 47 | +Each strategy is fine-tuned to only prefetch when needed and save your users' bandwidth. For example: |
| 48 | + |
| 49 | +- If a visitor is using [data saver mode](https://developer.mozilla.org/en-US/docs/Web/API/NetworkInformation/saveData) or has a [slow connection](https://developer.mozilla.org/en-US/docs/Web/API/NetworkInformation/effectiveType), prefetching will be turned off. |
| 50 | +- Quickly hovering or scrolling over links will not prefetch them. |
| 51 | +- Links that use the `viewport` strategy are prefetched with a lower priority to avoid clogging up the network. |
| 52 | + |
| 53 | +### Default prefetch strategy |
| 54 | + |
| 55 | +The default prefetch strategy when adding the `data-astro-prefetch` attribute is `hover`. To change it, you can configure [`prefetch.defaultStrategy`](/en/reference/configuration-reference/#prefetchdefaultstrategy) in your `astro.config.js` file: |
| 56 | + |
| 57 | +```js title="astro.config.js" ins={4-6} |
| 58 | +import { defineConfig } from 'astro/config'; |
| 59 | + |
| 60 | +export default defineConfig({ |
| 61 | + prefetch: { |
| 62 | + defaultStrategy: 'viewport' |
| 63 | + } |
| 64 | +}) |
| 65 | +``` |
| 66 | + |
| 67 | +### Prefetch all links by default |
| 68 | + |
| 69 | +If you want to prefetch all links, including those without the `data-astro-prefetch` attribute, you can set [`prefetch.prefetchAll`](/en/reference/configuration-reference/#prefetchprefetchall) to `true`: |
| 70 | + |
| 71 | +```js title="astro.config.js" ins={4-6} |
| 72 | +import { defineConfig } from 'astro/config'; |
| 73 | + |
| 74 | +export default defineConfig({ |
| 75 | + prefetch: { |
| 76 | + prefetchAll: true |
| 77 | + } |
| 78 | +}) |
| 79 | +``` |
| 80 | + |
| 81 | +You can then opt-out of prefetching for individual links by setting `data-astro-prefetch="false"`: |
| 82 | + |
| 83 | +```html |
| 84 | +<a href="/about" data-astro-prefetch="false">About</a> |
| 85 | +``` |
| 86 | + |
| 87 | +The default prefetch strategy for all links can be changed with `prefetch.defaultStrategy` as shown in the [Default prefetch strategy section](#default-prefetch-strategy). |
| 88 | + |
| 89 | +## Prefetch programmatically |
| 90 | + |
| 91 | +As some navigation might not always appear as `<a />` links, you can also prefetch programmatically with the `prefetch()` API from the `astro:prefetch` module: |
| 92 | + |
| 93 | +```astro |
| 94 | +<button id="btn">Click me</button> |
| 95 | +
|
| 96 | +<script> |
| 97 | + import { prefetch } from 'astro:prefetch'; |
| 98 | +
|
| 99 | + const btn = document.getElementById('btn'); |
| 100 | + btn.addEventListener('click', () => { |
| 101 | + prefetch('/about'); |
| 102 | + }); |
| 103 | +</script> |
| 104 | +``` |
| 105 | + |
| 106 | +You can additionally configure the priority of prefetching by passing the `with` option: |
| 107 | + |
| 108 | +```js |
| 109 | +// Prefetch with `fetch()`, which has a higher priority. |
| 110 | +prefetch('/about', { with: 'fetch' }); |
| 111 | + |
| 112 | +// Prefetch with `<link rel="prefetch">`, which has a lower priority |
| 113 | +// and manually scheduled by the browser. (default) |
| 114 | +prefetch('/about', { with: 'link' }); |
| 115 | +``` |
| 116 | + |
| 117 | +The `prefetch()` API includes the same [data saver mode](https://developer.mozilla.org/en-US/docs/Web/API/NetworkInformation/saveData) and [slow connection](https://developer.mozilla.org/en-US/docs/Web/API/NetworkInformation/effectiveType) detection, so that it only prefetches when needed. |
| 118 | + |
| 119 | +Make sure to only import `prefetch()` in client-side scripts as it relies on browser APIs. |
| 120 | + |
| 121 | +## Using with View Transitions |
| 122 | + |
| 123 | +When you use [View Transitions](/en/guides/view-transitions/) on a page, prefetching will also be enabled by default. It sets a default configuration of `{ prefetchAll: true }` which enables [prefetching for all links](#prefetch-all-links-by-default) on the page. |
| 124 | + |
| 125 | +You can customize the prefetch configuration in `astro.config.js` to override the default. For example: |
| 126 | + |
| 127 | +```js title="astro.config.js" |
| 128 | +import { defineConfig } from 'astro/config'; |
| 129 | + |
| 130 | +export default defineConfig({ |
| 131 | + // Disable prefetch completely |
| 132 | + prefetch: false |
| 133 | +}) |
| 134 | +``` |
| 135 | + |
| 136 | +```js title="astro.config.js" |
| 137 | +import { defineConfig } from 'astro/config'; |
| 138 | + |
| 139 | +export default defineConfig({ |
| 140 | + // Keep prefetch, but only prefetch for links with `data-astro-prefetch` |
| 141 | + prefetch: { |
| 142 | + prefetchAll: false |
| 143 | + } |
| 144 | +}) |
| 145 | +``` |
| 146 | + |
| 147 | +## Migrating from `@astrojs/prefetch` |
| 148 | + |
| 149 | +The `@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. |
| 150 | + |
| 151 | +1. Remove the `@astrojs/prefetch` integration and enable the `prefetch` config in `astro.config.js`: |
| 152 | + |
| 153 | + ```js title="astro.config.js" ins={6} del={2,5} |
| 154 | + import { defineConfig } from 'astro/config'; |
| 155 | + import prefetch from '@astrojs/prefetch'; |
| 156 | + |
| 157 | + export default defineConfig({ |
| 158 | + integrations: [prefetch()], |
| 159 | + prefetch: true |
| 160 | + }) |
| 161 | + ``` |
| 162 | + |
| 163 | +2. Convert from `@astrojs/prefetch`'s configuration options: |
| 164 | + |
| 165 | + - The deprecated integration used the `selector` config option to specify which links should be prefetched upon entering the viewport. |
| 166 | + |
| 167 | + Add `data-astro-prefetch="viewport"` to these individual links instead. |
| 168 | + |
| 169 | + ```html |
| 170 | + <a href="/about" data-astro-prefetch="viewport"> |
| 171 | + ``` |
| 172 | + |
| 173 | + - The deprecated integration used the `intentSelector` config option to specify which links should be prefetched when they were hovered over or focused. |
| 174 | + |
| 175 | + Add `data-astro-prefetch` or `data-astro-prefetch="hover"` to these individual links instead: |
| 176 | + |
| 177 | + ```html |
| 178 | + <!-- You can omit the value if `defaultStrategy` is set to `hover` (default) --> |
| 179 | + <a href="/about" data-astro-prefetch> |
| 180 | + |
| 181 | + <!-- Otherwise, you can explicitly define the prefetch strategy --> |
| 182 | + <a href="/about" data-astro-prefetch="hover"> |
| 183 | + ``` |
| 184 | + |
| 185 | + - The `throttles` option from `@astrojs/prefetch` is no longer needed as the new prefetch feature will automatically schedule and prefetch optimally. |
0 commit comments