[🐞] Prefetching not working for Link component on mouseover

[rdlogout]

Which component is affected?

Qwik City (routing)

Describe the bug

What im expecting,

When we hover on any anchor tag which nagivates to a new page it should fetch all the neccessary js files to render that page instantenously, but here when u visit the site first time (or empty cache and hard reload)

and hover any link eg Page A and wait 2 sec expecting it to prefetch the client side js and then click it then starts fetching the chunks which takes 1-3sec in some case.

In below video when i clear cache and hard reset and click page A it takes some time to navigate and display content of page A.

qwik-prefetch.mp4

Reproduction

https://github.com/rdlogout/qwik-test.git

Steps to reproduce

npm install
npm preview or npm run deploy to deploy to your own cloudflare pages and verify

System Info

System:
    OS: Windows 11 10.0.26100
    CPU: (16) x64 11th Gen Intel(R) Core(TM) i7-11700F @ 2.50GHz
    Memory: 50.13 GB / 63.84 GB
  Binaries:
    Node: 20.11.1 - C:\Program Files\nodejs\node.EXE
    npm: 10.2.4 - C:\Program Files\nodejs\npm.CMD
    pnpm: 8.15.3 - ~\AppData\Roaming\npm\pnpm.CMD
    bun: 1.1.10 - ~\.bun\bin\bun.EXE
  Browsers:
    Edge: Chromium (127.0.2651.105)
    Internet Explorer: 11.0.26100.1882
  npmPackages:
    @builder.io/qwik: ^1.11.0 => 1.12.0 
    @builder.io/qwik-city: ^1.11.0 => 1.12.0 
    typescript: 5.4.5 => 5.4.5
    undici: * => 7.2.0
    vite: 5.3.5 => 5.3.5

Additional Information

No response

[rdlogout]

https://github.com/user-attachments/assets/11187723-c7e2-4def-b623-603d000d41c2
This is another demo app using sveltekit SPA
when u hover it fetch the client side js which is an ideal behaviour for SPA

https://template.base15log.workers.dev/demo/2

[jordanw66]

The Link component was updated a while ago to mimic behavior of Next.js. The prefetch happens on mouseover only during dev, while in production (or preview) it occurs when the Link becomes visible.

Two things happening here:

• When you Empty Cache & Hard Reload, Chrome breaks Service Workers. This has been a known issue for a long time, I don't know if it's fixed. It means the Service Worker can't prefetch if it's not working. Normal users are not likely to encounter this issue through regular browsing.
• Qwik splits javascript at the function level and doesn't necessarily know the optimal way to bundle everything together based on user interactions. So a prefetch will fetch the initial bundles that it knows are required to click that Link, but doesn't automatically know all the subsequent bundles the page needs for an initial load until the Link is clicked. That's the purpose of Qwik Insights, or manually specifying bundling strategies.

You can verify the actual prefetch behavior is working in this video, using your same website:
Screencast_20250109_155702.webm

[jordanw66]

I should clarify that Qwik does a great job putting bundles together on its own, and that almost all the bundles on your example are prefetched in my video above. When you actually click a Link to another page, it loads nearly instantly with maybe only 1 extra bundle fetched for something. What I meant by point # 2 is that there can be a few edge cases usually with complex pages where things are not so straight forward and that is where altering the bundling with things like Qwik Insights can solve those issues.

[rdlogout]

I should clarify that Qwik does a great job putting bundles together on its own, and that almost all the bundles on your example are prefetched in my video above. When you actually click a Link to another page, it loads nearly instantly with maybe only 1 extra bundle fetched for something. What I meant by point # 2 is that there can be a few edge cases usually with complex pages where things are not so straight forward and that is where altering the bundling with things like Qwik Insights can solve those issues.

Thank you for your efforts

I see the modules are fetched instantly but i also see those request were served from SW.

Suggestion : Can;t we use manifest bundle to prefetch the modules on hover. I tried making a component for such and got the bundle files array ready too

eg ['q-sdajh.js','q-adsfx.js',...] but when i dispatch qprefetch with these bundles it do nothing, i dont see any js being fetched in network tab.

If any of the case work then i think it should be ok for me.