revalidatePath doesn't work with debouncing and page navigation

[eduardodallmann]

Link to the code that reproduces this issue

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

To Reproduce

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

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

[salehhamadeh]

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.