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}</>;
}