Usage with button on RSC

[ScreamZ]

The next JS documentation states that you can use onClick handler on RSC

https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions-and-mutations#event-handlers

But when using this code on RSC (no use client)

 onClick={async () => {
            "use server";
            await signIn();
          }}

I get:

Only plain objects, and a few built-ins, can be passed to Server Actions. Classes or null prototypes are not supported.

If i do the same with a form action, this is OK

I know we have import { signIn } from "next-auth/react" that works, but this require client component.

ANy way to proceed ?

Thanks

[decovicdev]

@ScreamZ they said

You can invoke a Server Action from event handlers such as onClick.

fix 1 RCC

 "use server";
 
export const signInAction = async () => {
            await signIn();
}

 "use client";

import { signInAction } from "actions.js"


<button  onClick={signInAction}></button>

fix 2 RSC

<button
        formAction={async () => {
          "use server";
          await signIn();
        }}
      ></button>

• you can't create actions in client components
• you can't use onClick on server components

[ScreamZ]

Damn you're good, thanks.

I'm getting lost as hell with all this syntax use server and this formAction property which is kind of dark magic. I guess I'll be used to over time.

[ScreamZ]

Still sounds terrifying 🤣