Prefetch not working in components with server:defer and top-level await

[ksolberg]

Astro Info

block
Astro                    v5.3.0
Node                     v22.12.0
System                   Windows (x64)
Package Manager          npm
Output                   server
Adapter                  none
Integrations             none

If this issue only occurs in one browser, which browser is a problem?

No response

Describe the Bug

In the following example only link a works.

All links work if top level await in Deferred.astro is removed.

astro.config.mjs

import { defineConfig } from 'astro/config';

// https://astro.build/config
export default defineConfig({
  output: 'server',
  prefetch: true
});

index.astro

---
import Deferred from '../components/Deferred.astro';
---

<h1>Home</h1>
<p>{new Date().toString()}</p>
<Deferred server:defer link="/about-a"/>	
<Deferred link="/about-b"/>	

Deferred.astro

---
const { link } = Astro.props;

const getMsg = async () => {
  return new Promise ((resolve) => {
    setTimeout(() => {
      resolve(`This is the message for ${link}`);
    }, 100);
  });
}

const res = await getMsg();
---
<a href={link} data-astro-prefetch>{link}</a>

about-a.astro
about-b.astro

<h1>About</h1>
<a href="/">Home</a>

What's the expected result?

Expect prefetch to work for both links, including the one with server:defer and top level-await.

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-dzimzdt7

Participation

• I am willing to submit a pull request for this issue.

[ematipico]

I tried the reproduction, and the prefetching works as expected, which is the hover strategy.

[ksolberg]

@ematipico

Astro.Minimal.Example.-.StackBlitz.-.NOVACARE.-.Microsoft.Edge.2025-02-28.09-57-03.mp4

From the attached video you'll see that hovering link b works as expected.

Hovering link a will NOT work.

[ematipico]

@ksolberg

Then, I believe your expectations aren't very clear or detailed enough. When I hover the links, I can see in the developer tools that the links are correctly prefetched by the browser.

What I suspect you expect is to have the island fetched in the background and then have it executed. Is that what you're saying? I might be wrong, but please be precise.

[ksolberg]

@ematipico Sorry if my expectations were unclear, I'll try to elaborate. If I hover link b, I can see the prefetch works by looking in the terminal that this target page is indeed fetched from the server / prefetched. If I hover link a (the one that exists in a server:defer'ed component) I can see that prefetch is not working, as the terminal doesn't show that a request to this page is made.

[ematipico]

It seems to be a timing issue. I'll need to investigate if prefetching is supposed to work like this with server islands

[ksolberg]

In my case, the real-world scenario involved a product list component. This component was server:defer'ed to avoid slowing down the overall response time while allowing an asynchronous request to pass a cookie containing session information. This was necessary for fetching customer-specific prices from a headless commerce API endpoint. Ideally, prefetching should work for the products in the list.

Like you, I believe this is a timing issue. My guess is that event listeners are being added to the host page before the deferred component has fully loaded.