---
title: ClientOnly
description: "`ClientOnly`は、クライアントサイドでのみ子要素をレンダリングするコンポーネントです。"
links:
  - source: https://github.com/yamada-ui/yamada-ui/tree/main/packages/react/src/components/client-only
  - storybook: https://yamada-ui.github.io/yamada-ui?path=/story/components-clientonly--basic
---

```tsx
<ClientOnly>
  <IconButton aria-label="Plus" icon={<PlusIcon />} />
</ClientOnly>
```

## 使い方

```tsx
import { ClientOnly } from "@yamada-ui/react"
```

```tsx
import { ClientOnly } from "@/components/ui"
```

```tsx
import { ClientOnly } from "@workspaces/ui"
```

```tsx
<ClientOnly />
```

### フォールバック

子要素の準備中に読み込み状態をレンダリングする場合は、`fallback`プロパティを使用します。

```tsx
<ClientOnly fallback={<Skeleton boxSize="10" rounded="l2" />}>
  <IconButton aria-label="Plus" icon={<PlusIcon />} />
</ClientOnly>
```

### レンダリングプロップ

コンポーネントが`window`, `document`, `localStorage`などのブラウザ専用APIにアクセスする場合は、レンダリングプロパティパターンを使用します。
このパターンにより、ブラウザAPIにアクセスするコンポーネントがクライアント側でのみ評価され、ハイドレーションの不一致やサーバー側のエラーが防止されます。\
また、サーバー側では必要のない重いコンポーネントのレンダリングにも使用できます。

```tsx
<ClientOnly fallback={<SkeletonText lineClamp={2} />}>
  {() => (
    <VStack gap="sm">
      <Text>Current URL: {window.location.href}</Text>
      <Text>Screen width: {window.innerWidth}px</Text>
    </VStack>
  )}
</ClientOnly>
```

:::warning
コンポーネントを直接渡すこともできますが、ブラウザAPIにアクセスするコンポーネントの場合は注意が必要です。
:::

```tsx
/* サーバー側でエラーを引き起こす可能性があります */
<ClientOnly fallback={<Skeleton />}>
  <ComponentThatUsesWindow />
</ClientOnly>

/* 安全です */
<ClientOnly fallback={<Skeleton />}>
  {() => <ComponentThatUsesWindow />}
</ClientOnly>
```

## Props

| Prop       | Default | Type                  | Description                                                                                                    |
| ---------- | ------- | --------------------- | -------------------------------------------------------------------------------------------------------------- |
| `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.                             |