Hey, I've encountered some issues and maybe misunderstandings with server actions. I've got a form component, which uses "use client" on top of it. Due to different submit actions I have to pass the onSubmit function as a property to that component.
Now I found out that server actions can be passed and the functions are executed on the server which would be the way I wan't. My Component with the server action should look like that>

export default function ReviewSection({ recipeId }: { recipeId: string }) {

    const mutation = api.review.create.useMutation({
      onSuccess: () => {
        toast.success("Review created!");
        reset({
          rating: 1,
          comment: "",
        });
      },
      onError: (err) => {
        console.log(err);
      },
    });

    const onSubmit = async (data: { rating: number; comment: string }) => {
      "use server"
      mutation.mutate({
        rating: data.rating,
        comment: data.comment,
        recipeId: recipeId,
      });
    };
  
  return (
      <ReviewForm recipeId={recipeId} submit={onSubmit} />
  );
}