Client side navigation `router.push()` does not work before/after server action

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 router function (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/A

Which 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

vercel / next.js