How to wrap a Client only Component?

[aheissenberger]

Goal: load the component only in the browser

In other frameworks this is possible by lazy loading the component, but here the lazy loaded component will still be requested from the RSC API. Currently this breaks my code as the RSC tries to run the code on the server and fails with browser dependencies as document accessed by some used frontend libraries.

I think loading lazy loaded components with RSC is great but please provide an escape hatch or wrapper to load some components only in the browser.

[dai-shi]

Hi, are you talking about SSR? (= is it only the case with --with-ssr?)

This is often an escape hatch.

waku/packages/website/src/components/client-only.tsx

Lines 10 to 22 in 458e69d

	export const ClientOnly = ({ children }: ClientOnlyProps) => {
	const [hasMounted, setHasMounted] = useState(false);
	useEffect(() => {
	setHasMounted(true);
	}, []);
	if (!hasMounted) {
	return null;
	}
	return children;
	};