search

vercel / next.js

The React Framework
https://nextjs.org
MIT License
127.37k stars 27.02k forks source link

Stale link navigations are updating the UI in local dev #70977

Open samselikoff opened 1 month ago

samselikoff commented 1 month ago

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:

https://github.com/user-attachments/assets/cd5a2852-de0d-452c-a21e-2973f7337863

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

samselikoff commented 1 month ago

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

ztanner commented 1 month ago

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