next.js icon indicating copy to clipboard operation
next.js copied to clipboard

`use` breaks client navigation on page refresh

Open lukemorales opened this issue 3 years ago • 0 comments

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

  1. Navigate to the private route where a Header component that uses use to load async data is mounted
  2. Suspense might or might not resolve (?)
  3. Navigate between the pages, you should be able to see Pages 1 through 4.
  4. Press the refresh icon in the StackBlitz container browser
  5. Try navigating between pages, and you'll find yourself stuck

lukemorales avatar Nov 02 '22 02:11 lukemorales