search

vercel / next.js

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

server actions block navigation #65552

Open scrabase opened 4 months ago

scrabase commented 4 months ago

Link to the code that reproduces this issue

https://github.com/scrabase/bug-next-server-actions-block-navigation

To Reproduce

  1. clone above reproduced github repo
  2. go to the cloned folder
  3. in command terminal, type [pnpm install]
  4. go to localhost:3000 in web browser
  5. click button
  6. while pending, try to navigate by clicking a link
  7. you can see the bug

Current vs. Expected behavior

current: navigation blocked when server action running expected: navigation should not blocked when server action long running

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 23.4.0: Fri Mar 15 00:10:42 PDT 2024; root:xnu-10063.101.17~1/RELEASE_ARM64_T6000
  Available memory (MB): 65536
  Available CPU cores: 10
Binaries:
  Node: 20.12.2
  npm: 10.5.0
  Yarn: 1.22.18
  pnpm: 8.15.1
Relevant Packages:
  next: 14.2.3 // Latest available version is detected (14.2.3).
  eslint-config-next: 14.2.3
  react: 18.3.1
  react-dom: 18.3.1
  typescript: 5.4.5
Next.js Config:
  output: N/A

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

create-next-app, Navigation

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

next dev (local), next build (local), next start (local), Vercel (Deployed), Other (Deployed)

Additional context

https://github.com/vercel/next.js/issues/49425 resolved this issue. But in next@14.2.3 this bug this bug occurred again. I have checked that canary versions also have this bug.

I just copied https://github.com/Fredkiss3/bug-next-server-actions-blocking-navigation this repo and did just chagned to latest next version and bug occured

in summary: next@13.4.20-canary.1 -> no bug next@14.2.3 -> bug

mordechaim commented 1 month ago

This happens only when the server action does a revalidation (path or tag), and the action returns the updated page. This causes the navigated page to wrongfully replace its real content with the action result. It's weird, because the URL will show the new URL, but the page will be the previous page.