next.js
next.js copied to clipboard
`use` breaks client navigation on page refresh
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.1.0: Sun Oct 9 20:15:09 PDT 2022; root:xnu-8792.41.9~2/RELEASE_ARM64_T6000
Binaries:
Node: 16.14.2
npm: 7.24.2
Yarn: 1.22.19
pnpm: 7.13.3
Relevant packages:
next: 13.0.2-canary.0
eslint-config-next: 13.0.1
react: 18.2.0
react-dom: 18.2.0
What browser are you using? (if relevant)
No response
How are you deploying your application? (if relevant)
No response
Describe the Bug
When using use on Client components to suspend and fetch async data, the navigation between pages breaks if you refresh your browser page.
Expected Behavior
Client navigation stays the same
Link to reproduction
https://stackblitz.com/edit/vercel-next-js-umupcw?file=src/app/(private)/private/header.tsx,src/app/(private)/private/layout.tsx
To Reproduce
- Navigate to the private route where a Header component that uses
useto load async data is mounted - Suspense might or might not resolve (?)
- Navigate between the pages, you should be able to see Pages 1 through 4.
- Press the
refresh iconin the StackBlitz container browser - Try navigating between pages, and you'll find yourself stuck