Astro: Hydration directive required

概要

Astroでインタラクティブなコンポーネントにhydrationディレクティブが指定されていない場合のエラーです。

エラーメッセージ

``` This component needs a client:* directive to be interactive ```

原因

1. *client:ディレクティブの欠落: インタラクティブなコンポーネントにディレクティブがない
2. 間違ったディレクティブ: 用途に合わないディレクティブ
3. サーバーコンポーネント内でのフック使用: SSRでuseStateを使用
4. フレームワーク統合の未設定: React/Vue等の設定漏れ

解決策

1. 適切なclient:*ディレクティブを追加

```astro

import Counter from ‘../components/Counter.jsx’;

2. 静的コンポーネントとの使い分け

```astro

import StaticCard from ‘../components/StaticCard.astro’; import InteractiveButton from ‘../components/Button.jsx’;

<InteractiveButton client:load onClick={() => alert(‘clicked’)} /> ```

3. astro.config.mjsでフレームワーク統合

```javascript // astro.config.mjs import { defineConfig } from ‘astro/config’; import react from ‘@astrojs/react’; import vue from ‘@astrojs/vue’;

export default defineConfig({ integrations: [react(), vue()], }); ```

4. client:onlyの使用

```astro

// サーバーで実行されない（SSR回避） import ClientOnlyComponent from ‘../components/ClientOnly.jsx’;

よくある間違い

• 全コンポーネントにclient:loadを付ける（パフォーマンス低下）
• .astroファイル内でReact hooksを使う
• client:visibleでスクロール前に必要な要素

関連エラー

• Next.js: Hydration mismatch
• React: Invalid hook call