Prefetching dynamic route doesn't work as expected

mwildehahn commented 12 months ago

Link to the code that reproduces this issue or a replay of the bug

https://github.com/mwildehahn/reproduce-layout-rerender

To Reproduce

navigate to https://reproduce-layout-rerender.vercel.app/
wait for prefetch to finish, switch your network condition to offline
click nested
page errors out

Current vs. Expected behavior

I might be misunderstanding this, but from https://nextjs.org/docs/app/building-your-application/routing/linking-and-navigating

Dynamic Routes: prefetch default to automatic. Only the shared layout down until the first loading.js file is prefetched and cached for 30s. This reduces the cost of fetching an entire dynamic route, and it means you can show an instant loading state for better visual feedback to users.

I took this to mean that the loading.js file for the route would be prefetched and cached (which makes sense). In practice, it seems like a prefetch does happen, but it doesn't include the loading file and I can't see that file cached when inspecting window.nd.prefetchCache after the prefetch has returned.

What I would expect is to instantly see a transition to the loading state and then maybe an error state after that if the navigation fails but now it seems like it requires making the initial server request to display the loading state.

It seems like something is broken with caching in general since even if you don't mess with network conditions, the previous route is never cached even within the 30s window

Verify canary release

[X] 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.4.0: Mon Mar  6 21:00:41 PST 2023; root:xnu-8796.101.5~3/RELEASE_ARM64_T8103
    Binaries:
      Node: 18.17.1
      npm: 9.6.7
      Yarn: 1.22.10
      pnpm: 8.7.4
    Relevant Packages:
      next: 13.4.20-canary.22
      eslint-config-next: N/A
      react: 18.2.0
      react-dom: 18.2.0
      typescript: 5.1.3
    Next.js Config:
      output: N/A

Which area(s) are affected? (Select all that apply)

App Router, Routing (next/router, next/navigation, next/link)

Additional context

No response

zer0dt commented 7 months ago

Have you had any success with figuring out why the loading state is not instant like mentioned in the docs?

https://nextjs.org/docs/app/building-your-application/routing/loading-ui-and-streaming#instant-loading-states

stabildev commented 6 months ago

Similar issue in the Next Dashboard App course: The Invoices page is never prefetched, not even its <Suspense> fallbacks. The content of the prefetch is

0:["7EGV6vg9n8TEdf9zJaqPA",[["children","dashboard","children","invoices",["invoices",{"children":["__PAGE__",{}]}],null,null]]]

vercel / next.js