How to debug "hydration mismatch" errors when mixing Server Components with Client Components?

'use client';
import { useId, useEffect, useState } from 'react';

function ClientOnly({ children, fallback }) {
  const [isClient, setIsClient] = useState(false);
  
  useEffect(() => {
    setIsClient(true);
  }, []);
  
  return isClient ? children : fallback;
}

// Server Component usage
export default async function Dashboard() {
  return (
    <div>
      <StaticHeader />
      <ClientOnly fallback={<div>Loading chart...</div>}>
        <InteractiveChart />
      </ClientOnly>
    </div>
  );
}