i have a question about next 13, if next js is encouraging us to use server components (especially for fast loading time and seo), and at the same time we can't pass callbacks from these server compos into reusable component like Button component, see exampel below :
i have 2 server components Product and Article
1-

export default function Product() {
  const Buy = () => {
    //Buy
  };
  return (
      <Button func={Buy}></Button>
  );
}

2-

export default function Article() {
  const AddToFav = () => {
    //AddToFav
  };
  return (
      <Button func={AddToFav}></Button>
  );
}

and my Button component which is client side

export const Button = ({ func }) => {
  return <button onClick={func}>Click me</button>;
};

obviously this gives an error, while i'm concerned about SEO for my 2 previous component, so i do not want to turn them into client component,
what's best way to solve this problem and achieve good peformance and SEO friendly app
thank you for the help