背景

最近自分の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を記述

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

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

背景