Server Action forever pending status

[LearningProcesss]

Verify canary release

• [X] I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
      Platform: linux
      Arch: x64
      Version: #1 SMP Debian 5.10.179-1 (2023-05-12)
    Binaries:
      Node: 20.5.0
      npm: 9.8.1
      Yarn: 1.22.19
      pnpm: 8.6.11
    Relevant Packages:
      next: 13.4.14-canary.2
      eslint-config-next: 13.4.13
      react: 18.2.0
      react-dom: 18.2.0
      typescript: 5.1.6
    Next.js Config:
      output: N/A

Which area(s) of Next.js are affected? (leave empty if unsure)

App Router

Link to the code that reproduces this issue or a replay of the bug

https://github.com/LearningProcesss/server_actions_case_study

To Reproduce

Go to localhost:3000/videos and add files one, two or three, N times

Describe the Bug

Server action status remains pending forever. From that point the entire app froze.

Expected Behavior

As intended, simple server action that manipulate data that comes from client.

Which browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

_NEXT-1515

[Yrobot]

same, some requests are under forever pending

[TahaBoulehmi]

I used to have the same issue but not anymore. Try to upgrade to the latest next version, remove your .next and node_modules folder and install again. The great thing is that this has never happened in production. I'm not sure what solved it exactly in my case, but I remember the issue disappeared on dev as soon as I tried to build the project for the first time to test it.

[shuding]

According to what @TahaBoulehmi mentioned above, could you update Next.js in your reproduction and verify if it's still happening? Thanks!

I used to have the same issue but not anymore. Try to upgrade to the latest next version, remove your .next and node_modules folder and install again.

[GuillaumeHalb]

The great thing is that this has never happened in production. I'm not sure what solved it exactly in my case, but I remember the issue disappeared on dev as soon as I tried to build the project for the first time to test it.

Same here, I'm using Next 14.0.3 and sometimes I'm stuck in a pending state.

My server action send an the form data to the server and then redirect to the next page. I see some logs in my next component, but the URL is still the previous one and the component does not update. Then I also figured out that my form status was forever pending.

[lingo-anshul]

Facing the same issue. In my case the request takes a long to reach the ingress controller (verified via ingress pod logs) once it the sent from the browser. I am using server actions to mutate an entity (POST, PUT) via form action. NextJS app is hosted on AWS K8s. Need help to debug this

[dinogomez]

Having the same issue as well, my request are stuck at pending running v14.0.4

[jpulec]

I'm also seeing this behavior, and I can consistently reproduce it if I try to access an endpoint that streams data back from multiple browser tabs in parallel. This is using the edge runtime in dev.

[malord]

I've just run in to this. In my case, the action is called on component mount and the issue occurs as I move between pages - it's fine on the first page load.

It happens in next 14.2.4 and in production builds.

An ugly workaround I found was to put the action call inside a setTimeout:

setTimeout(() => {
  callYourActionHere();
}, 0);