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も対応しているようです。
---
// 「---」内のものはビルド段階しか実行されていない
const thisWorks: number = 42;
console.log('ビルド実行する際にログが出力される', thisWorks);
---
<div class="example-1">
<h1>Hello world!</h1>
</div>
SPA
仮としてReactコンポーネントを使いたい場合は普通にインポートすれば使えます。
---
import ReactComponent from './components/ReactComponent.tsx';
---
<div>
<ReactComponent name="hoge" />
</div>
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
)を実行するとこんな結果になります。
<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
を指定すると動的コンポーネントにすることもできます。
<div>
<ReactComponent client:load />
</div>
client:load
を指定すると、ページ読み込み完了する際にJSが起動されます。
さらにパフォーマンス向上したい場合はclient:visible
によりコンポーネントがブラウザに現れるとJSが自動されます。
And more
自分が使っている機能はこれぐらいしかないですが、
他のパッケージを導入せずにAstroは以下の機能も付いています:
- Markdownファイル → HTMLに生成
- Markdownファイルにコンポーネントを使用
- Fetch APIでデータを読み込んでページを生成
- ページネーション
- RSSファイル生成
- コンポーネント内にスコープ付きCSSを記述
興味があればぜひお試してください!
日本語のドキュメンテーションがあるようですが、
まだ翻訳されていないページが多数なので英語の方がおすすめです。
Author And Source
この問題について(Astro+Reactで爆速な開発して、爆速なスタティックサイトを作ってみました。), 我々は、より多くの情報をここで見つけました https://qiita.com/adwin/items/cb1a3d6ebaa3b93bc2b4著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .