Prefetch

          
            ## Astro Prefetching Guidelines

1.  Purpose: Improves perceived performance by prefetching linked pages in the background before the user clicks the link, leading to faster navigation.
2.  Enablement: Opt-in feature. Enable globally in `astro.config.mjs`:

    ```javascript
    // astro.config.mjs
    import { defineConfig } from "astro/config";

    export default defineConfig({
      prefetch: true, // Can also be an object for detailed config
    });
    ```

3.  Usage on Links: Add the `data-astro-prefetch` attribute to individual `<a>` tags pointing to internal site pages.
    ```html
    <a href="/about" data-astro-prefetch>About Us</a>
    ```
    Prefetching does not work for external links.
4.  Prefetch Strategies: Control _when_ prefetching occurs. Set per-link or via global default.

    - `hover` (Default): Prefetches when the link is hovered over or focused.
    - `tap`: Prefetches just before the user clicks the link.
    - `viewport`: Prefetches links as soon as they enter the viewport.
    - `load`: Prefetches all opted-in links on the page after the initial page load.

    ```html
    <!-- Use a specific strategy -->
    <a href="/contact" data-astro-prefetch="tap">Contact</a>

    <!-- Disable prefetch for a specific link -->
    <a href="/logout" data-astro-prefetch="false">Log Out</a>
    ```

5.  Configuration Object (`astro.config.mjs`): Fine-tune prefetching behavior.

    ```javascript
    // astro.config.mjs
    import { defineConfig } from "astro/config";

    export default defineConfig({
      prefetch: {
        // Change the default strategy for links with just `data-astro-prefetch`
        defaultStrategy: "viewport",
        // Prefetch ALL links on the page by default, even without the attribute?
        // (Note: This is true by default if View Transitions are enabled)
        prefetchAll: false,
      },
    });
    ```

6.  Programmatic API: Prefetch based on events other than link interactions.

    ```javascript
    import { prefetch } from "astro:prefetch";

    // Call this in a client-side script
    prefetch("/dashboard");

    // Options:
    prefetch("/slow-resource", { ignoreSlowConnection: true });

    // With experimental.clientPrerender enabled:
    // 'immediate' (default), 'eager', 'moderate', 'conservative'
    prefetch("/maybe-needed", { eagerness: "moderate" });
    ```

7.  View Transitions Integration:
    - If View Transitions are enabled on a page, prefetching is enabled automatically with a default config equivalent to `prefetch: { prefetchAll: true }`.
    - You can override this by explicitly setting the `prefetch` config in `astro.config.mjs` (e.g., set `prefetchAll: false` or `prefetch: false`).
8.  Browser Support & Considerations:
    - Uses `<link rel="prefetch">` where supported (Chrome), falls back to `fetch()` (Firefox, Safari).
    - Crucially relies on proper HTTP Caching Headers (especially `ETag`, but also `Cache-Control`/`Expires`) set by the server/host for the target pages. Without correct caching headers, prefetching might fail or be inefficient, especially in Firefox and Safari.
    - Static/prerendered pages often get `ETag` automatically from hosts.
    - SSR pages require manual setting of appropriate cache headers.
    - Respects user's data saver mode and connection speed (defaults to `tap` on slow connections), unless `ignoreSlowConnection: true` is used programmatically.
9.  Migration: The `@astrojs/prefetch` integration is deprecated. Remove it and use the built-in `prefetch` config. Convert `selector` config to `data-astro-prefetch="viewport"` and `intentSelector` to `data-astro-prefetch="hover"` (or just `data-astro-prefetch`).

Reference: [Astro Prefetch Docs](https://docs.astro.build/en/guides/prefetch/)