On click in server components.
Answered
Gull-billed Tern posted this in #help-forum
Gull-billed TernOP
Couldn't find a better title for my question....
I have a navbar component that renders a "login with github" button or an avatar depending on the user's auth state. When they are logged in and click on the avatar it shows up a menu, in the menu there's a "logout" button. I know I cannot use onClick in server components. So...what can I do to make the button clickable without inherently changing the whole component to a client component?
I have a navbar component that renders a "login with github" button or an avatar depending on the user's auth state. When they are logged in and click on the avatar it shows up a menu, in the menu there's a "logout" button. I know I cannot use onClick in server components. So...what can I do to make the button clickable without inherently changing the whole component to a client component?
Answered by fuma
Just separate it into multiple files, and mark the button as client component. You can read the [Patterns](https://nextjs.org/docs/app/building-your-application/rendering/composition-patterns) section in the docs.
8 Replies
Just separate it into multiple files, and mark the button as client component. You can read the [Patterns](https://nextjs.org/docs/app/building-your-application/rendering/composition-patterns) section in the docs.
Answer
@Gull-billed Tern Couldn't find a better title for my question....
I have a navbar component that renders a "login with github" button or an avatar depending on the user's auth state. When they are logged in and click on the avatar it shows up a menu, in the menu there's a "logout" button. I know I cannot use onClick in server components. So...what can I do to make the button clickable without inherently changing the whole component to a client component?
Or use a form with an action to trigger a server action to login/logout
(While server action is currently an experimental feature, I won't recommend this for now)
Yep
Server actions are the only way to avoid a "use client" here, but it is experimental
Just make another client component for this
Gull-billed TernOP
Hey, I put the logout button in a separate component and marked it "use client" works fine now. I feel dumb for not thinking about this 😂 Either way, thanks so much.