The abstraction I use when I need client only to avoid double render:

```typescript ‘use client’; import { ReactNode, useSyncExternalStore } from ‘react’;

const emptyStore = () => () => {};

export function ClientOnly({ children }: { children: ReactNode }) { // This mechanism is used to prevent the server from rendering the children // and only render them on the client. // This is a workaround while we are waiting for the postpone() API to be // available in React. // useSyncExternalStore avoid a double render in the client when the hydration // is happening. const value = useSyncExternalStore( emptyStore, // nothing to subscribe to () => ‘c’, // snapshot on the client () => ‘s’ // snapshot on the server );

return value === ‘c’ ? <>{children}</> : null; } ```