静的なページは Astro。
動く部分だけ React。

このページの本文は完全な静的 HTML です。下の 2 箇所だけが island として読み込まれるので、トップの表示は JavaScript を待ちません。 トンマナは同じトークンを共有しているため、Astro 側と React 側で見た目がずれません。

Works

関数の代わりに { url, method } を渡しています。 .astro から props は JSON 化されるため、この形なら島に渡せます。

Contact

独自のバリデーションを持つのでラッパ (.tsx) 経由で読み込んでいます。