Use ClientOnly for Browser-Only UI
Render browser-only components on the client with a stable SSR fallback.
Pattern
import { ClientOnly } from "remix-utils/client-only";
export function MapSection() {
return (
<ClientOnly fallback={<StaticMapPreview />}>
{() => <InteractiveMap />}
</ClientOnly>
);
}Rules
- Always provide a fallback to avoid layout shift
- Use ClientOnly for DOM APIs or browser-only libraries