ClientOnly

A component that only renders its children on the client-side, preventing hydration mismatches between server and client rendering.

Import

Code
 
import { ClientOnly } from "zudoku/components";

Props

Code
 
type ClientOnlyProps = {
  children: ReactNode;
  fallback?: ReactNode;
};

Usage

Basic Usage

Code
 
<ClientOnly>
  <SomeClientOnlyComponent />
</ClientOnly>

With Fallback

Code
 
<ClientOnly fallback={<div>Loading...</div>}>
  <InteractiveWidget />
</ClientOnly>

Examples

Code
 
function MyComponent() {
  return (
    <div>
      <h1>This renders on both server and client</h1>
      <ClientOnly fallback={<Spinner />}>
        <ComponentThatUsesWindowObject />
      </ClientOnly>
    </div>
  );
}

Use Cases

• Browser APIs: Components that use window, document, or other browser-only APIs
• Third-party Libraries: Libraries that don't support SSR
• Theme Switches: Preventing flash of incorrect theme
• Interactive Widgets: Components with complex client-side state
• Conditional Features: Features that should only appear on the client

Notes

:::caution Use ClientOnly sparingly as it can impact SEO and initial page load performance. Only use it when necessary for components that cannot be server-rendered. :::

:::tip Always provide a meaningful fallback that matches the approximate size and layout of your client-only component to prevent layout shifts. :::