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>

Props

Prop	デフォルト	型 / 説明
`children`	-	`ReactNodeOrFunction` The content to render on the client side. Note: Use the function pattern when accessing browser-only APIs.
`fallback`	-	`ReactNode` The fallback content to render while the component is mounting on the client side.

類似のコンポーネント

Showは、条件に基づいて子要素を表示または非表示にするコンポーネントです。

Portalは、現在のDOM階層の外側に要素をレンダリングするコンポーネントです。

Slotは、propsを子要素にマージするコンポーネントです。

Forは配列をループして各アイテムに対してコンポーネントをレンダリングするために使用されるコンポーネントです。

Formatは、日付・数値・バイトなどを特定のロケールに合わせてフォーマットするために使用されます。