Server action never resolves if router.push in the meantime

[lcswillems]

Link to the code that reproduces this issue

https://codesandbox.io/p/devbox/muddy-morning-78ym53?file=%2Fapp%2Fpage.tsx%3A10%2C1

To Reproduce

1. Open the Codesandbox

Current vs. Expected behavior

In app/page.tsx:

"use client";

import { useRouter } from "next/navigation";
import { useEffect, useState } from "react";
import { f } from "./server";

export default function Page() {
  const router = useRouter();
  const [text, setText] = useState("");

  useEffect(() => {
    Promise.all([f(), f()]).then(() => setText("finished"));
    router.replace("?");
  }, []);

  return <>{text}</>;
}

In app/server.ts:

"use server";

export const f = async () => {};

Promise.all([f(), f()]) will never resolve. It seems that in particular the 2nd f() doesn't resolve.

Provide environment information

Operating System:
  Platform: linux
  Arch: x64
  Version: #52-Ubuntu SMP PREEMPT_DYNAMIC Thu Dec  5 13:09:44 UTC 2024
  Available memory (MB): 13684
  Available CPU cores: 16
Binaries:
  Node: 20.11.1
  npm: 10.2.4
  Yarn: 1.22.22
  pnpm: 9.9.0
Relevant Packages:
  next: 15.1.2 // Latest available version is detected (15.1.2).
  eslint-config-next: 15.0.4
  react: 19.0.0
  react-dom: 19.0.0
  typescript: 5.6.2
Next.js Config:
  output: standalone

Which area(s) are affected? (Select all that apply)

Not sure

Which stage(s) are affected? (Select all that apply)

next dev (local), next start (local)

Additional context

No response

[aleynaeser]

I think, in Next.js, performing a router.push or router.replace while waiting for a Promise resolution can cause a conflict. This happens because navigation triggers the component to unmount and remount, interrupting the Promise execution within useEffect. @lcswillems

You can revise like

export default function Page() {
  const router = useRouter();
  const [text, setText] = useState("loading...");

  useEffect(() => {
    const fetchData = async () => {
      await Promise.all([f(), f()]);
      setText("finished");
    };

    fetchData();
    router.replace("/page");
  }, []);

  return <>Text is: {text}</>;
}

[lcswillems]

@aleynaeser It seems your code doesn't work, no?

https://codesandbox.io/p/devbox/affectionate-babbage-yc3yhp

[borisghidaglia]

Hey @lcswillems, @leerob suggested to switch to regular route handlers while waiting for a fix.

Demo sandbox: https://codesandbox.io/p/devbox/hardcore-yonath-tjtskf?file=%2Fapp%2Fpage.tsx%3A7%2C30

[aleynaeser]

@aleynaeser It seems your code doesn't work, no?

https://codesandbox.io/p/devbox/affectionate-babbage-yc3yhp

I think it works. Check this => https://codesandbox.io/p/devbox/small-sun-hlyl43

[lcswillems]

@borisghidaglia Thank you very much for transmitting! With normal route handlers it works but I need to create ones and I lose the type safety too.

@aleynaeser The router.push should happen in parallel of the fetching, not after.

[aleynaeser]

The router.push should happen in parallel of the fetching, not after.

Okay, I updated code. Can u check it again?

[lcswillems]

@aleynaeser The router code is still executed after. You await before.

[aleynaeser]

@aleynaeser The router code is still executed after. You await before.

Otherwise, how will you see the finished text on the screen? I deleted await and works. But I'm not sure if it's what you think.

[leerob]

This should be fixed in v15.2.2. Please try it out, thank you! If you are still seeing issues, we can re-open and investigate.

[lcswillems]

Thank you very much!!! 🙏 🙏 🙏