redirect() inside App Router Server Action doesn't navigate on first attempt

[april0391]

Summary

I'm using the App Router in Next.js and calling a server action via useActionState. Inside that server action, I perform some validation and then call redirect(/download/${download.id}) if everything passes.

Here's a simplified version of my client component:

"use client";

import { useActionState } from "react";
import { verifyOrderInfo } from "@/domain/download/actions";
import { Button } from "@/components/ui/button";
import LoadingSpinner from "@/domain/common/loading-spinner";

export default function CreateDownloadLinkButton({ email, orderNumber }: { email: string; orderNumber: string }) {
  const [state, action, isPending] = useActionState(verifyOrderInfo, { email, orderNumber });

  return (
    <form action={action}>
      <input type="hidden" name="email" value={email} />
      <input type="hidden" name="orderNumber" value={orderNumber} />
      <Button type="submit" disabled={isPending}>
        Get download link {isPending && <LoadingSpinner />}
      </Button>
      {!isPending && <p className="text-destructive mt-1">{state.error}</p>}
    </form>
  );
}

In the verifyOrderInfo server action, I call redirect() like this:

...
redirect(`/download/${download.id}`);

The Problem:
On the first attempt, the server action runs successfully.

The server log shows a redirect to /download/${downloadId}, and I can see a GET request for that path in the network tab.

But the browser doesn't actually navigate — it just stays on the same page.

If I refresh the page and try again, the redirect works properly and navigation occurs.

If instead I return { success: true } from the server and call router.push() on the client, it always navigates successfully, even on the first try.

🧐 What I suspect:
Maybe the browser fails to fetch the JS bundle for the new route during the first attempt?

Or maybe something is wrong with the way Next.js handles redirect() in server actions?

Environment:
Next.js with App Router

Using useActionState in a Client Component

redirect() from next/navigation inside the Server Action

Additional information

No response

Example

No response

[SametDulger]

Hi @april0391,

Thanks for the detailed description. This behavior where redirect() inside a Server Action triggers the redirect server-side but the browser doesn’t navigate on the first attempt is a known quirk with the current App Router and Server Actions implementation.

What’s happening?
When you call redirect() in a Server Action, Next.js responds with a redirect response.

However, the client-side navigation depends on the client receiving and handling that redirect correctly.

Sometimes on the very first attempt, the client doesn’t fully hydrate or hasn’t yet loaded the necessary JavaScript for the new route, so it fails to navigate, even though the network shows the redirect.

Refreshing works because all JS bundles are loaded by then.

Workarounds:
Use client-side navigation after the server action
Instead of redirecting inside the Server Action, return a success status and the target URL, then call router.push() or router.replace() client-side. This guarantees navigation after the server action completes.

Force reload after redirect
If you must redirect server-side, consider adding a client reload fallback in your component to ensure the navigation.

Keep an eye on Next.js updates
This behavior is actively evolving and should improve as Server Actions mature.

In short: for reliable navigation on the first try, handling redirects client-side after the server action resolves is the current best practice.

Let me know if you want help refactoring your code that way.

[april0391]

Thank you so much for your detailed explanation!
Now my doubts have finally been cleared up. Knowing that this behavior is a known quirk in the current Next.js implementation rather than a simple bug really puts my mind at ease.
I’m also glad to hear that this issue is expected to be improved in the future.
I’ll definitely try the approach you suggested—handling navigation client-side after the server action completes.
Thanks again for your help!
Have a great day!

[icyJoseph]

Hi,

Let's hold up --

Would you mind sharing more info on this issue? Possibly your app tree, and some more pseudocode of how your server action works?

I know we fixed some issues with some redirects in server actions already last year (for example a redirect between two different root layouts), which is probably what the LLM above is pointing at - not sure which one we are dealing with and what training data it had available.

If this is a new issue we haven't covered, then I don't think there's any "future expectations" to have, unless we can make a reproducible repository to investigate further.