Astro+Reactで爆速な開発して、爆速なスタティックサイトを作ってみました。

背景

最近自分のHPをそろそろ更新しようと思ってました。
使いまわせるパーツが多いし、SPAフレームワークが大好きし、なるべくDRYにもしたくて
SPAで作り直そうかと思いました。

しかし、
自分のHPはスタティックなコンテンツしかなくて、
SPAにすると余計にJSがはいってしまいます。。

SSG・SSRとかを使えばHTMLが生成されますが
無駄に複雑になるし、
結局JSが入ってしまうので何かいいツールがあるかなと探し始めました。

そこで、Astroというツールを見つかりました。

Astroとは？

ドキュメンテーションによりますと、
Astroはモーダンな静的サイトジェネレーター(SSG)です。

SSGはいろんなライブラリーがありますが、
AstroはSPAで記述して、プレーンなHTMLが生成されます。

他のSSGと比べると、
Gatsby・Gridsomeと似たような__記述方法__と、
Jekyll・Hugoと似たような__結果が生成__されます。

コンセプト

AstroはIsland Architectureというコンセプトがあって、
サイトを一つなアプリにすることではなく、
画面に必要な部分をアプリ化して、
最低限のJSで画面を実装するということです。

爆速で開発

v0.21にAstroのビルドツールがViteに変更されました。
Viteによりnpm run devを実行すると秒でサーバが立ち上がれるし、
HMRも対応しているので変更した内容が一瞬ブラウザに反映されます。

記述方法

Astroは独自の記述方法（.astro）を持っていますが、SPA（React、Vue.js、Svelte）の記述も対応しています。

Astro

Astroの記述は、Markdown + JSXが組み合わせた記述になっています。
Typescriptも対応しているようです。

sample.astro

---
// 「---」内のものはビルド段階しか実行されていない

const thisWorks: number = 42;
console.log('ビルド実行する際にログが出力される', thisWorks);
---
<div class="example-1">
  <h1>Hello world!</h1>
</div>

SPA

仮としてReactコンポーネントを使いたい場合は普通にインポートすれば使えます。

index.astro

---
import ReactComponent from './components/ReactComponent.tsx';
---

<div>
  <ReactComponent name="hoge" />
</div>

ReactComponent.tsx

type Props {
  name?: string;
}
export default function ReactComponent({ name }: Props) {
  return (
    <>
      <h1>Hello from React Component</h1>
      <h3>Hello {name ?? "world"}</h3>
    </>
  );
}

ビルド

ビルド（npm run build）を実行するとこんな結果になります。

index.html

<div>
  <h1>Hello from React Component</h1>
  <h3>Hello hoge</h3>
</div>

ビルドのディレクトリを見ると、JSファイルは一切入っていないです。

dist/
├── assets/
│   └── logo.svg
├── favicon.svg
├── index.html
├── manifest.json
├── robots.txt
└── sitemap.xml

動的コンテンツを有効

せっかくSPAを使っているので、完全に静的HTMLを生成せずに、
コンポーネントのプロップスにclient:loadを指定すると動的コンポーネントにすることもできます。

index.astro

<div>
  <ReactComponent client:load />
</div>

client:load を指定すると、ページ読み込み完了する際にJSが起動されます。
さらにパフォーマンス向上したい場合はclient:visibleによりコンポーネントがブラウザに現れるとJSが自動されます。

And more

自分が使っている機能はこれぐらいしかないですが、
他のパッケージを導入せずにAstroは以下の機能も付いています：

• Markdownファイル → HTMLに生成
• Markdownファイルにコンポーネントを使用
• Fetch APIでデータを読み込んでページを生成
• ページネーション
• RSSファイル生成
• コンポーネント内にスコープ付きCSSを記述

興味があればぜひお試してください！
日本語のドキュメンテーションがあるようですが、
まだ翻訳されていないページが多数なので英語の方がおすすめです。