Client Only

The ClientOnly component allows to render content only on the client/browser. This is useful when you want to render content that is not supported by the server (e.g. window or document).

import { ClientOnly } from '~/core/ui/If';
 
<ClientOnly>
  <div>Only rendered on the client</div>
</ClientOnly>

An alternative to this component can be using the dynamic function from next/dynamic:

import dynamic from 'next/dynamic';
 
const DynamicComponent = dynamic(() => import('./DynamicComponent'), {
  ssr: false,
});

If you're using Next.js, consider using the dynamic function instead of ClientOnly.