astroファイルでReactコンポーネントが動かない

概要

astroファイルでReactコンポーネントが動かなくて苦戦しましたので、対応策を残しておきます。

エラー内容

動かなかった記述

---
import InteractiveCounter from '../components/InteractiveCounter.jsx';
---

<InteractiveCounter />

以下のような状況でした。

• コンポーネントは表示される
• ボタンを押しても反応しない
• console.logも出力されない

対応策

動くようになった記述（コンポーネント部分だけ変更）

- <InteractiveCounter />
+ <InteractiveCounter client:load />

インポートするコンポーネントに client:load を付けただけで解消できました。
クライアントディレクティブというものがあり、その指定が無いと静的なHTMLとして解釈されるようです。
クライアントディレクティブはいくつか種類があり、状況にあわせてコンポーネントの動的化機能を制御できるようです。

おわりに

公式ドキュメントあまり見ていなかったので苦戦してしまいました
公式ドキュメントをちゃんと読みましょう。。。

なお、astroの公式ドキュメントはほとんどのページで日本語が用意されているので、大変助かります。

公式ドキュメント