How to render component only on the server

ServerOnly.tsx

// https://x.com/JLarky/status/1826404005876301882

export function FancyStuff(props: { getFromServer?: undefined | (() => string) }) {
	const [mousePos, setMousePos] = useState('0, 0');
	useEffect(() => {
		document.addEventListener('mousemove', (e) => {
			setMousePos(`${e.clientX}, ${e.clientY}`);
		});
	}, []);
	return (
		<div>
			Hello from client {mousePos}
			<X>hello123 {props.getFromServer?.()}</X>
			<X>hello123 {props.getFromServer?.()}</X>
		</div>
	);
}

export function X(props: { children: React.ReactNode }) {
	const id = useId();
	const ssrOnly = useMemo(() => {
		if (typeof window !== 'undefined') {
			const el = document.querySelector(`[data-hid="${id}"]`);
			if (el) {
				console.log('hydrated from html', el);
				return <div data-hid={id} dangerouslySetInnerHTML={{ __html: el.innerHTML }} />;
			}
		}
		return;
	}, [id]);
	return ssrOnly || <div data-hid={id}>{props.children}</div>;
}