vercel
Prefetching dynamic route doesn't work as expected
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
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
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]]]
