When should I use Server Components vs Client Components in Next.js?

I’m building a dashboard with Next.js and trying to understand the right boundary between Server and Client Components.

Should I fetch all my data in the server component and pass it down as props, or is there a better pattern for interactive sections?

export default async function Dashboard() {
  const data = await getData();
  return <InteractiveChart data={data} />;
}

I’d love to hear how you structure this in production applications.