2 passes :

• 1st pass during SSR/SSG
• 2nd pass after rehydration during the first update

To render only on the 2nd pass :

function ClientOnly({ children, ...delegated }) {
  const [hasMounted, setHasMounted] = React.useState(false);
  React.useEffect(() => {
    setHasMounted(true);
  }, []);
  if (!hasMounted) {
    return null;
  }
  return (
    <div {...delegated}>
      {children}
    </div>
  );
}

Used with :

<ClientOnly>
  <Navigation />
</ClientOnly>