When using event handlers in server components, you cannot directly invoke a server action with props. Instead, you need to bind the server action to the props first. This ensures the props are prehydrated.

So instead of doing this

import { serverFunction } from "@/actions";

return(
  <button onClick={() => serverFunction(props)}>
    Action
  </button>
)

You would do this

import { serverAction } from "@/actions";

const serverFunctionAction = serverFunction.bind(null, props);

return(
  <button onClick={serverFunctionAction}>
    Action
  </button>
)

This creates a new function that can safely be used as an event handler without directly invoking the server action during render.

Read more about this: Docs