Stale link navigations are updating the UI in local dev

[samselikoff]

Link to the code that reproduces this issue

https://github.com/samselikoff/stale-link-updates-in-dev

To Reproduce

1. Start the application in development (npm run dev)
2. Quickly click Link 1, Link 2, then Link 3
3. You'll see the UI update with all three navigations – it will show "Post 1", "Post 2" and "Post3"

Current vs. Expected behavior

Current:

The UI updates with all link navigations, including stale ones.

Expected:

The UI should discard stale link navigations, and only render the latest one once it settles.

Note: This behavior only happens on dev. When I deploy to Vercel, the UI only shows the final navigation.

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 23.6.0: Mon Jul 29 21:14:30 PDT 2024; root:xnu-10063.141.2~1/RELEASE_ARM64_T6000
  Available memory (MB): 65536
  Available CPU cores: 10
Binaries:
  Node: 20.9.0
  npm: 10.1.0
  Yarn: N/A
  pnpm: 9.7.1
Relevant Packages:
  next: 15.0.0-canary.179 // Latest available version is detected (15.0.0-canary.179).
  eslint-config-next: N/A
  react: 19.0.0-rc-2d16326d-20240930
  react-dom: 19.0.0-rc-2d16326d-20240930
  typescript: 5.3.3
Next.js Config:
  output: N/A

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

Navigation

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

next dev (local)

Additional context

The /post/[id]/page.tsx is an RSC that awaits a 1-second Promise. The stale updates only happen in dev.

Here's a video:

Screen.Recording.2024-10-08.at.3.34.56.PM.mov

Here are some links to quickly see the two different behaviors:

• ❌ StackBlitz dev build: https://stackblitz.com/github/samselikoff/stale-link-updates-in-dev?file=app%2Flayout.tsx

• ✅ Vercel prod build: https://stale-link-updates-in-dev.vercel.app

[samselikoff]

Seems to have been added in canary.155. In canary.154 it works as expected.

[ztanner]

Hey @samselikoff, this looks to be caused by the React upgrade in canary.155, likely caused by facebook/react#30935. I've notified the team and once it's fixed in React, we'll sync it into Next.js.