Prefetch for links not working as expected with App Router

[dlehmhus]

Verify canary release

• I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
      Platform: darwin
      Arch: arm64
      Version: Darwin Kernel Version 22.3.0: Mon Jan 30 20:38:37 PST 2023; root:xnu-8792.81.3~2/RELEASE_ARM64_T6000
    Binaries:
      Node: 18.15.0
      npm: 9.5.0
      Yarn: 1.22.19
      pnpm: 7.3.0
    Relevant packages:
      next: 13.2.5-canary.30
      eslint-config-next: N/A
      react: 18.2.0
      react-dom: 18.2.0

Which area(s) of Next.js are affected? (leave empty if unsure)

App directory (appDir: true), Routing (next/router, next/navigation, next/link)

Link to the code that reproduces this issue

https://github.com/dlehmhus/next-link-preload-example

To Reproduce

Click on any link.

link-prefetch-example.mov

Describe the Bug

When using the next link component with prefetch enabled, not all data is actually prefetch.

Expected Behavior

All relevant page data should be prefetched.

Which browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

[mo-hh234]

I can reproduce the issue, prefetch does not seem to work

[m1yon]

I believe this behavior is because you're triggering a hard navigation when navigating to /slug-c (a route with a dynamic segment).

If you look at the hard vs. soft navigation docs, a route including dynamic segments isn't eligible for a soft navigation (unless it has the same dynamic segments as the current route).

During a hard navigation, "the cache is invalidated and the server refetches data and re-renders the changed segments.". So it's prefetching when the link is displayed, but when you navigate, the cache is cleared and the data is refetched from the server.

I'm running into the same issue: is it not possible to prefetch a dynamic page and use that data rather than making another request when you navigate? What's the point in even prefetching in this case?

[dlehmhus]

I think this PR that just landed in canary will allow for prefetching of dynamic pages... 🤞

[johannesschaffer]

@m1yon I tested it with going from /en/blog to /en/projects. Still doesn't work. Additionally I used generateStaticParams().
@dlehmhus Just tested canary 2 and 12 - Neither fixed it.
It worked in next@13.2.4.

[m1yon]

@m1yon I tested it with going from /en/blog to /en/projects. Still doesn't work. Additionally I used generateStaticParams(). @dlehmhus Just tested canary 2 and 12 - Neither fixed it. It worked in next@13.2.4.

what does the actual route definition look like for your case? is blog/projects a dynamic segment? If so, it would still be a hard navigation since it doesn't meet the conditions for a soft navigation, regardless if you're using generateStaticParams or not.

[johannesschaffer]

@m1yon No, only the language ("en") is a dynamic segment. Like that:

• [lang]
  • blog
    • page.tsx
  • project
    • page.tsx

[johannesschaffer]

@dlehmhus @m1yon Actually, I hade a mistake in my layout. It has to be nested below the [lang] folder. Additionally you have to generate the static params (generateStaticParams()). With that, it worked for me, I think, starting 13.3.2-canary-8, but definetly now, 13.3.2
Weirdly, it prefetches non-pregenerated dynamic segments, but refetches them regardless, when actually navigating to them. Why even prefetch then?
I think this issue can be closed. Prefetching dynamic segments (non-pregenerated) would rather be a feature request.

[johannesschaffer]

@dlehmhus @m1yon Actually, I hade a mistake in my layout. It has to be nested below the [lang] folder. Additionally you have to generate the static params (generateStaticParams()). With that, it worked for me, I think, starting 13.3.2-canary-8, but definetly now, 13.3.2 Weirdly, it prefetches non-pregenerated dynamic segments, but refetches them regardless, when actually navigating to them. Why even prefetch then? I think this issue can be closed. Prefetching dynamic segments (non-pregenerated) would rather be a feature request.

An update on that. Dynamic routes actually work, you just either have to pregenerate them or export const dynamic = "error" / "force-static"

[dlehmhus]

@johannesschaffer I don't think the static part is needed for the prefetch to work! The important part is that the explicitly set prefetch={true}, otherwise the page will only be partially prefetched. Works with the MRE from the issue. Take a look at the MR here for more details. Closing this issue now, since it seems to be fixed.

[johannesschaffer]

@dlehmhus Thanks for the tip. I think it's however still worth mentioning, that you can get full prefetch without specifying prefetch={true} by just setting dynamic=error on the dynamic page. Doesn't involve as much rewriting.

[github-actions]

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.