Redirection on server actions

[Lzadhito]

Goals

1. An option to do redirect replace on server actions
2. Function to navigate back to previous page on server actions (optional)

Background

I've been wondering how can I fully utilize server actions for mutations. I encountered a problem which I do a DELETE on a data detail page (ex: blog/will_deleted_id), after that I want to either replace my browser history into another page or navigate back to previous page (ex: blog). With current redirect function on server action, the only opt is to push a page which results a navigate back into a 404 (blog/wil_deleted_id page already deleted).

The workaround I used for this is to use navigation on client side which not as convenience as doing post mutation functions on server

Proposal

Enable second argument of redirect function that works on server action, or a function to navigate back on server actions

Example

"use server";
import { redirect, RedirectType } from "next/navigation";

export async function deletePost(formData: FormData) {
  const id = formData.get("id");
  await fetch(`https://delete-post.com/${id}`, { method: "DELETE" });
  redirect("/blog", RedirectType.replace);
}

while The type parameter has no effect when used in Server Components this example will push the browser history regardless the second param given

[ezeparziale]

Can you share an example?

[Lzadhito]

Thanks for response, I've added the example it looks like these

"use server";
import { redirect, RedirectType } from "next/navigation";

export async function deletePost(formData: FormData) {
  const id = formData.get("id");
  await fetch(`https://delete-post.com/${id}`, { method: "DELETE" });
  redirect("/blog", RedirectType.replace);
}

while The type parameter has no effect when used in Server Components this example will push the browser history regardless the second param given.

Meanwhile I'm proposing that redirect("/blog", RedirectType.replace) the second param will have effect on the function to replace current browser stack

[ezeparziale]

I think that the best way is use the redirect function in the component, in this way redirect use the Replace

[Lzadhito]

That's my workaround for this case, but can you explain me why using it on component could be the best way? why not also enable it on server component?

[litehacker]

@Lzadhito Just a question - why have you classified this as Idea but not a Bug. According to their documentation it should replace, but works as push. Even if we use "replace" type or not. I confirm this issue on V 14.2.5.

'replace' (default) or 'push' (default in Server Actions)

source redirect() Parameters

[hongz1]

I am also very confused on the second parameter in server action. Although I passed second parameter with 'RedirectType.replace', server action always ignore the second parameter and it pushes so that I can go back to previous page.

As @ezeparziale mentioned, I can just use 'useRouter' and replace it in the client component, but it keeps bothering me that the usage of redirect optional parameter in server action....

[andrew310]

This is happening for me as well. I am using the redirect function within a server action, and it ignores the type and seems to always push. This is using [email protected].

[litehacker]

This is happening for me as well. I am using the redirect function within a server action, and it ignores the type and seems to always push. This is using [email protected].

Let's change the issue to a "Bug"

[litehacker]

I believe this issue should be classified as a "Bug" rather than an "Idea" because it describes a malfunction in the existing functionality. Could we please update the issue type accordingly?

[mp3por]

Any updates on this ?

[ziyafenn]

Can confirm,type param also has no effect in server actions.