router.push() does not work before/after server action #63949Description
Link to the code that reproduces this issue
https://codesandbox.io/p/devbox/keen-newton-f8sxhh?file=%2Fapp%2FProfileLink.tsx%3A12%2C1
To Reproduce
- Create an event handler inside a client component which calls any
routerfunction (eg.router.push) and calls a server action (the order does not matter). - Run the event handler
In the reproduction:
- Go to profile 1
- Click the bottom button
Current vs. Expected behavior
Expected: The redirect happens immediately, the user sees the new page immediately and the server action runs later in the background.
Current: The redirect happens after the server action is executed.
Attempted workaround: I tried adding a delay between the redirect and calling the server action, but this is not a reliable workaround. I haven't found a working workaround yet.
Additionaly, in my project I notice issues that I could not reproduce in the sandbox:
when the redirect eventually happens (after the server action returns), the URL changes but the page contents are not updated - neither the displayed page (server component), nor the return value of useParams (client component).
This might be related to suspense boundaries but I wasn't able to find the cause.
Provide environment information
Operating System:
Platform: win32
Arch: x64
Version: Windows 11 Home
Binaries:
Node: 20.8.0
npm: N/A
Yarn: N/A
pnpm: N/A
Relevant Packages:
next: 14.1.4
eslint-config-next: 14.0.3
react: 18.2.0
react-dom: 18.2.0
typescript: 5.3.2
Next.js Config:
output: N/AWhich area(s) are affected? (Select all that apply)
App Router, Routing (next/router, next/navigation, next/link)
Which stage(s) are affected? (Select all that apply)
next dev (local), next start (local)
Additional context
No response