ClientOnly
ClientOnlyは、クライアントサイドでのみ子要素をレンダリングするコンポーネントです。
<ClientOnly>
<IconButton aria-label="Plus" icon={<PlusIcon />} />
</ClientOnly>
使い方
import { ClientOnly } from "@yamada-ui/react"
import { ClientOnly } from "@/components/ui"
import { ClientOnly } from "@workspaces/ui"
<ClientOnly />
フォールバック
子要素の準備中に読み込み状態をレンダリングする場合は、fallbackプロパティを使用します。
<ClientOnly fallback={<Skeleton boxSize="10" rounded="l2" />}>
<IconButton aria-label="Plus" icon={<PlusIcon />} />
</ClientOnly>
レンダリングプロップ
コンポーネントがwindow, document, localStorageなどのブラウザ専用APIにアクセスする場合は、レンダリングプロパティパターンを使用します。
このパターンにより、ブラウザAPIにアクセスするコンポーネントがクライアント側でのみ評価され、ハイドレーションの不一致やサーバー側のエラーが防止されます。
また、サーバー側では必要のない重いコンポーネントのレンダリングにも使用できます。
<ClientOnly fallback={<SkeletonText lineClamp={2} />}>
{() => (
<VStack gap="sm">
<Text>Current URL: {window.location.href}</Text>
<Text>Screen width: {window.innerWidth}px</Text>
</VStack>
)}
</ClientOnly>
コンポーネントを直接渡すこともできますが、ブラウザAPIにアクセスするコンポーネントの場合は注意が必要です。
/* サーバー側でエラーを引き起こす可能性があります */
<ClientOnly fallback={<Skeleton />}>
<ComponentThatUsesWindow />
</ClientOnly>
/* 安全です */
<ClientOnly fallback={<Skeleton />}>
{() => <ComponentThatUsesWindow />}
</ClientOnly>