logout button be client or server component and causing infinite renders
Answered
Briard posted this in #help-forum
BriardOP
i did login action in server side using server actions , my question should logout button be client side or server side?
when i did it server side in my client component it caused infinite renders ,
when i did it server side in my client component it caused infinite renders ,
"use server";
import { signOutAction } from "@/utils/actions";
import { createSupabaseClient } from "@/utils/supabase/server";
export default async function LogoutButton() {
const supabase = createSupabaseClient();
const {
data: { user },
} = await (await supabase).auth.getUser();
if (!user) {
return null;
}
return (
<form action={signOutAction}>
<button type="submit" className="bg-red-500 text-white px-4 py-2 rounded">
Logout
</button>
</form>
);
}Answered by LuisLl
Do not mark Server Component with the
“use server” transforms any exported async function in a POST endpoint to be reachable by the client, which means, only Client Components should be calling Server Actions.
Components in Next.js are Server Components by default, to opt out of it you need to explicitly set a boundary with
I believe that if you call a Server Action from a Server Component, this behaves like a regular async function since you’re already on the server.
To log out, the better way would be to call a Server Action from a client component, usually when you log out you write to cookies, let’s say to delete them, and that can only be done in Server Actions or Route Handlers.
“use server” directive.“use server” transforms any exported async function in a POST endpoint to be reachable by the client, which means, only Client Components should be calling Server Actions.
Components in Next.js are Server Components by default, to opt out of it you need to explicitly set a boundary with
“use client” but these directives aren’t opposite to each other, rather they serve a different purpose, and are meant to be used together.I believe that if you call a Server Action from a Server Component, this behaves like a regular async function since you’re already on the server.
To log out, the better way would be to call a Server Action from a client component, usually when you log out you write to cookies, let’s say to delete them, and that can only be done in Server Actions or Route Handlers.
8 Replies
@Briard i did login action in server side using server actions , my question should logout button be client side or server side?
when i did it server side in my client component it caused infinite renders ,
tsx
"use server";
import { signOutAction } from "@/utils/actions";
import { createSupabaseClient } from "@/utils/supabase/server";
export default async function LogoutButton() {
const supabase = createSupabaseClient();
const {
data: { user },
} = await (await supabase).auth.getUser();
if (!user) {
return null;
}
return (
<form action={signOutAction}>
<button type="submit" className="bg-red-500 text-white px-4 py-2 rounded">
Logout
</button>
</form>
);
}
I think you're misunderstanding how to use the "use server" directive; it's only used in files that have server actions.
https://nextjs.org/docs/app/api-reference/directives/use-server
https://nextjs.org/docs/app/api-reference/directives/use-server
What I see is that you have a component that implements a server action, it has no client-side interactivity, which is correct, but you are using a directive that does not require a server component.
@Losti! I think you're misunderstanding how to use the "use server" directive; it's only used in files that have server actions.
https://nextjs.org/docs/app/api-reference/directives/use-server
BriardOP
i thought that server actions can only be used in server components since logout can be handled in server
@Briard i thought that server actions can only be used in server components since logout can be handled in server
They can be used in both client and server components. It's easier to implement them in server components than in client components, since you'd have to be a little more careful with those to avoid problems.
Your implementation isn't bad at all! I know you can improve it in the future. Just be careful with the use of directives. By default, a Next.js file is a server component (both in pages and components).
Your implementation isn't bad at all! I know you can improve it in the future. Just be careful with the use of directives. By default, a Next.js file is a server component (both in pages and components).
If your problem is already solved, please let me know.
Do not mark Server Component with the
“use server” transforms any exported async function in a POST endpoint to be reachable by the client, which means, only Client Components should be calling Server Actions.
Components in Next.js are Server Components by default, to opt out of it you need to explicitly set a boundary with
I believe that if you call a Server Action from a Server Component, this behaves like a regular async function since you’re already on the server.
To log out, the better way would be to call a Server Action from a client component, usually when you log out you write to cookies, let’s say to delete them, and that can only be done in Server Actions or Route Handlers.
“use server” directive.“use server” transforms any exported async function in a POST endpoint to be reachable by the client, which means, only Client Components should be calling Server Actions.
Components in Next.js are Server Components by default, to opt out of it you need to explicitly set a boundary with
“use client” but these directives aren’t opposite to each other, rather they serve a different purpose, and are meant to be used together.I believe that if you call a Server Action from a Server Component, this behaves like a regular async function since you’re already on the server.
To log out, the better way would be to call a Server Action from a client component, usually when you log out you write to cookies, let’s say to delete them, and that can only be done in Server Actions or Route Handlers.
Answer