Link prefetch broken / navigation slow on Vercel

[dbarnett]

I noticed that site seems to be prefetching \ URLs but then discarding those and refetching pages when you actually click links. It looks like it may be intentional for some reason and related to a URL param _rsc with a nonce-looking value that varies on each fetch.

For example, when I hit the home path /, I can see in Devtools that it triggers fetches for several paths linked from home like "/posts/basic-website-i18n?_rsc=acgkz", but then if I click the link to that page it fetches "/posts/basic-website-i18n?_rsc=6fyle" and seems to block navigation on that fetch, taking ~half a second to load the page and apparently defeating the purpose of the previous prefetch requests.

[dbarnett]

It could be I have some caching settings not configured properly and defaulting to basically always bypass cache (something related to cache control response headers?), but it's weird that it would bother to prefetch at all if there weren't any way to actually use the prefetched response when navigating.

I did find it'll still do fast client-side navigation on subsequent link clicks as I navigate back and forth across pages, only the first click on each link is slow, but it's quite noticeably slow.

[dbarnett]

Actually, looking at the responses, whatever it's prefetching isn't the full page content... That first ?_rsc=acgkz fetch is only 203 B while the later ?_rsc=6fyle one when I click the link is 3.6 kB and does contain actual page content in the response. So maybe I just don't have Link prefetch properly enabled and whatever it's doing with those fetch network requests is some other intentional behavior.

Anyway, functionally the behavior I'm missing is that after loading the home page I'd like the next click on a link to e.g. /projects to be an instantaneous client-side nav, not a full round trip to the server. My read of https://nextjs.org/docs/pages/api-reference/components/link#prefetch is that prefetching should be enabled by default, and should at the very least be happening when I hover a cursor over the link, not waiting until I click the link.

[dbarnett]

Aha, that doc was for Pages Router, for App Router the default is a little different for dynamic routes (https://nextjs.org/docs/app/api-reference/components/link#prefetch). Adding explicit prefetch={true} seems to help.

[dbarnett]

Confirmed fixed! After 76cded9 deployed all the link navigation within the site sped up and the network traffic looks how I expected it should (no extra fetch at the moment I click a link, larger responses to those initial prefetch requests).

Might fine-tune it later to not prefetch quite so aggressively to save some bandwidth.