revalidatePath doesn't work with debouncing and page navigation

Link to the code that reproduces this issue

https://codesandbox.io/p/github/eduardodallmann/app-next-server-action-problem-2

To Reproduce

Go to the events page
Edit one of the events by clicking on edit
Quickly click on the backdrop
The list in the table will not be updated

322840551-71964ccd-ac59-45d3-b4c0-1700ebeb4a57

Current vs. Expected behavior

I will describe how my application works. It has a listing of events. When I click edit, I navigate to events/[slug]. The form will use a server action with debouncing to save. To control this debouncing I use context api, also to show on the screen that it is saving. After making an edit to the form and waiting 2 seconds, the data is saved and the /events path is revalidated. Everything works perfectly.

Now I will describe the problem. When I edit the form and click on the backdrop quickly before 2 seconds, the drawer is closed and the application navigates to /events again. When the 2 seconds are complete, the server action is executed, the data change is saved, but the list in the table is not updated.

Provide environment information

Operating System:
  Platform: linux
  Arch: x64
  Version: #1 SMP Fri Mar 29 23:14:13 UTC 2024
  Available memory (MB): 31944
  Available CPU cores: 24
Binaries:
  Node: 18.19.0
  npm: 10.8.1
  Yarn: N/A
  pnpm: 9.10.0
Relevant Packages:
  next: 14.2.12 // Latest available version is detected (14.2.12).
  eslint-config-next: 14.2.12
  react: 18.3.1
  react-dom: 18.3.1
  typescript: 5.6.2
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), Vercel (Deployed)

Additional context

I tested with 14.2.12 and 15.0.0-canary.158

Repo https://github.com/eduardodallmann/app-next-server-action-problem-2

I am seeing a similar issue on v14.2.14. I have a link like this:

const debouncedRevalidatePath = useCallback(debounce((path) => revalidate(path), 1000), [revalidate]);

<Link
  href={messageLink(row.original)}
  onClick={
    !row.original.read
      ? () => debouncedRevalidatePath(pathname)
      : undefined
    }
  prefetch={false}
  tabIndex={-1}>link</Link>

where revalidate is the following server action:

export async function revalidate(path: string) {
  revalidatePath(path);
}

What I'm seeing is that after the page navigation when the debounced revalidatePath is called, a new entry gets added to my browser's history stack. So I have to press the back button twice to go back to where I was before clicking the link.

vercel / next.js