Astro

静的マークアップと React Islands を組み合わせたコンテンツ志向の Astro サイトです。Astro ページは .astro で記述し、対話的な React コンポーネントは ReScript モジュールとして同居させて client:load / client:visible で必要に応じて hydrate します。@astrojs/node で SSR を有効化しており、astro dev / astro build / astro preview がそのまま動きます。

注釈

本プラグインは .astro ファイル自体の言語サポートを提供しません。.astro の編集には公式の Astro VS Code 拡張やエディタの HTML/JSX モードを使ってください。ReScript ファイル (.res) はこれまで通りプラグインの全機能が使えます。

生成されるレイアウト

src/
├── pages/
│   └── index.astro
├── components/
│   ├── Counter.res
│   └── StaticGreeting.res
└── __tests__/
    └── Counter.test.mjs
astro.config.mjs
tsconfig.json
rescript.json
package.json

主なファイル

  • src/pages/index.astro — ホームページ。StaticGreeting (静的レンダリング) と Counter (client:load で hydrate) を埋め込みます。

  • src/components/Counter.res — ReScript で書かれた対話型 React Island。

  • src/components/StaticGreeting.res — 静的 React コンポーネント。Astro がサーバー側でレンダリングし、このコンポーネントの JS は一切配信されません。

  • astro.config.mjs — @astrojs/react インテグレーションと @astrojs/node アダプタを配線。既定で output: "server" を有効化しています。

npm スクリプト

コマンド

説明

dev

rescript -w と並行して Astro 開発サーバーを起動します。

build

ReScript をコンパイルしてから astro build を実行します。

preview

ビルド済みサイトをローカルで配信します。

test

Vitest を実行します。

Day-two ポインタ

  • Hydration ディレクティブ — 各 Island ごとに JS をどれだけ早く配信したいかに応じて client:load / client:idle / client:visible / client:media / client:only="react" から選択します。

  • 完全静的出力 — output を削除 (もしくは "static" を指定) し、@astrojs/node を依存から外せば純粋な静的デプロイに切り替えられます。

  • ルート単位の prerender — SSR サイトでも特定のページで export const prerender = true をエクスポートすれば、そのルートだけ静的レンダリングに戻せます。