astro/packages/integrations/prefetch

@astrojs/prefetch 🔗

• Why Prefetch?
• Installation
• Usage
• Configuration
• Troubleshooting
• Contributing
• Changelog

Why Prefetch?

Page load times play a big role in usability and overall enjoyment of a site. This integration brings the benefits of near-instant page navigations to your multi-page application (MPA) by prefetching page links when they are visible on screen.

To further improve the experience, especially on similar pages, stylesheets are also prefetched along with the HTML. This is particularly useful when navigating between tabs on a static site, where most of the page's content and styles don't change.

Installation

Quick Install

The astro add command-line tool automates the installation for you. Run one of the following commands in a new terminal window. (If you aren't sure which package manager you're using, run the first command.) Then, follow the prompts, and type "y" in the terminal (meaning "yes") for each one.

# Using NPM
npx astro add prefetch
# Using Yarn
yarn astro add prefetch
# Using PNPM
pnpm astro add prefetch

If you run into any issues, feel free to report them to us on GitHub and try the manual installation steps below.

Manual Install

First, install the @astrojs/prefetch package using your package manager. If you're using npm or aren't sure, run this in the terminal:

npm install @astrojs/prefetch

Then, apply this integration to your astro.config.* file using the integrations property:

  // astro.config.mjs
  import { defineConfig } from 'astro/config';
+ import prefetch from '@astrojs/prefetch';

  export default defineConfig({
    // ...
    integrations: [prefetch()],
    //             ^^^^^^^^^^
  });

Usage

When you install the integration, the prefetch script is automatically added to every page in the project. Just add rel="prefetch" to any <a /> links on your page and you're ready to go!

In addition, you can add rel="prefetch-intent" to any <a /> links on your page to prefetch them only when they are hovered over, touched, or focused. This is especially useful to conserve data usage when viewing your site.

Configuration

The Astro Prefetch integration handles which links on the site are prefetched and it has its own options. Change these in the astro.config.mjs file which is where your project's integration settings live.

config.selector

By default the prefetch script searches the page for any links that include a rel="prefetch" attribute, ex: <a rel="prefetch" /> or <a rel="nofollow prefetch" />. This behavior can be changed in your astro.config.* file to use a custom query selector when finding prefetch links.

// astro.config.mjs
import { defineConfig } from 'astro/config';
import prefetch from '@astrojs/prefetch';

export default defineConfig({
  // ...
  integrations: [
    prefetch({
      // Only prefetch links with an href that begins with `/products`
      selector: "a[href^='/products']",
    }),
  ],
});

config.intentSelector

By default, the prefetch script also searches the page for any links that include a rel="prefetch-intent" attribute, ex: <a rel="prefetch-intent" />. This behavior can be changed in your astro.config.* file to use a custom query selector when finding prefetch-intent links.

// astro.config.mjs
import { defineConfig } from 'astro/config';
import prefetch from '@astrojs/prefetch';

export default defineConfig({
  // ...
  integrations: [
    prefetch({
      // Only prefetch links with an href that begins with `/products` or `/coupons`
      intentSelector: ["a[href^='/products']", "a[href^='/coupons']"],

      // Use a string to prefetch a single selector
      // intentSelector: "a[href^='/products']"
    }),
  ],
});

config.throttle

By default the prefetch script will only prefetch one link at a time. This behavior can be changed in your astro.config.* file to increase the limit for concurrent downloads.

// astro.config.mjs
import { defineConfig } from 'astro/config';
import prefetch from '@astrojs/prefetch';

export default defineConfig({
  // ...
  integrations: [
    prefetch({
      // Allow up to three links to be prefetched concurrently
      throttle: 3,
    }),
  ],
});

Troubleshooting

• If your installation doesn't seem to be working, try restarting the dev server.
• If a link doesn't seem to be prefetching, make sure that the link is pointing to a page on the same domain and matches the integration's selector option.

For help, check out the #support channel on Discord. Our friendly Support Squad members are here to help!

You can also check our Astro Integration Documentation for more on integrations.

Contributing

This package is maintained by Astro's Core team. You're welcome to submit an issue or PR!

Changelog

See CHANGELOG.md for a history of changes to this integration.