Server Action causes a re-render
Unanswered
Ichneumonid wasp posted this in #help-forum
Ichneumonid waspOP
Hello, I have a server action that is used in a client component for deleting the current user from my system. The client component is part of the /profile page which is server side. Whenever the client component calls the server action, when the server action returns I have a redirect to a /goodbye page. However, the server action causes a page re-render on return, and since my /profile is protected, the user has been deleted and I get an error that the user is not authenticated and redirects back to /login.
I know that if instead of a server action I implement this as an internal API and then fetch I wont get that re-render but to me it feels weird having everything as a server action and just 1 thing as an API route (I know that even server actions are made into POST routes in the end but at least organization/project wise).
Is there a way to fix/handle this or do I just make it into an API route? Or do I turn all my server actions into API routes?
I know that if instead of a server action I implement this as an internal API and then fetch I wont get that re-render but to me it feels weird having everything as a server action and just 1 thing as an API route (I know that even server actions are made into POST routes in the end but at least organization/project wise).
Is there a way to fix/handle this or do I just make it into an API route? Or do I turn all my server actions into API routes?
4 Replies
@Ichneumonid wasp Hello, I have a server action that is used in a client component for deleting the current user from my system. The client component is part of the /profile page which is server side. Whenever the client component calls the server action, when the server action returns I have a redirect to a /goodbye page. However, the server action causes a page re-render on return, and since my /profile is protected, the user has been deleted and I get an error that the user is not authenticated and redirects back to /login.
I know that if instead of a server action I implement this as an internal API and then fetch I wont get that re-render but to me it feels weird having everything as a server action and just 1 thing as an API route (I know that even server actions are made into POST routes in the end but at least organization/project wise).
Is there a way to fix/handle this or do I just make it into an API route? Or do I turn all my server actions into API routes?
Saltwater Crocodile
The issue isn't authentication itself, it's that Server Actions trigger a re-render of the current route when they finish. Since /profile is protected and the user is already deleted, the auth guard runs again and redirects to /login before the /goodbye redirect can take effect.
The clean fix is to call redirect("/goodbye") directly inside the Server Action so execution stops and the page never re-renders. Alternatively, this specific action can live in a route handler since it changes auth state, there's no need to convert all Server Actions.
The clean fix is to call redirect("/goodbye") directly inside the Server Action so execution stops and the page never re-renders. Alternatively, this specific action can live in a route handler since it changes auth state, there's no need to convert all Server Actions.
"use server";
import { redirect } from "next/navigation";
export async function deleteAccount() {
await deleteUser();
await signOutUser(); // if needed
redirect("/goodbye");
}
import { redirect } from "next/navigation";
export async function deleteAccount() {
await deleteUser();
await signOutUser(); // if needed
redirect("/goodbye");
}
Ichneumonid waspOP
But if the server action is wrapped in a try catch the redirect throws an exception
Ichneumonid waspOP
Actually also if I signout in the server action i get again redirected to the login page