mini-starter/src/client/utils/ClientOnly.tsx

// components/ClientOnly.tsx
import { useEffect, useState, ReactNode } from 'react';

interface ClientOnlyProps {
  // 子组件（仅在客户端渲染）
  children: ReactNode;
  // 服务器端渲染时的占位内容（可选，默认 null）
  fallback?: ReactNode | null;
}

export default function ClientOnly({ children, fallback = null }: ClientOnlyProps) {
  const [isClient, setIsClient] = useState<boolean>(false);

  useEffect(() => {
    // 仅在客户端执行，标记为客户端环境
    setIsClient(true);
  }, []);

  // 服务器端渲染时显示 fallback，客户端渲染时显示 children
  return isClient ? children : fallback;
}