Astro触ってみた
はじめに
Astro のドキュメント読んだり、サンプルプロジェクトで素振りしてみた雑感を書いておきます。 前提としてですが、筆者は React を使うことが多いです。
Astro の思想
React で作るような SPA の問題として初期表示のパフォーマンスが重いことが挙げられる。
→ 初期表示時にブラウザ側で JavaScript を解析・実行して、アプリケーション全体を構築する必要があるから
→ でも本当にブラウザ側で構築しないといけないのはユーザーとのインタラクションが発生する部分だけだよね
→ じゃあ、インタラクションが発生しない部分はサーバーでレンダリングして静的な HTML と CSS だけ返却する。インタラクションがある部分だけブラウザで構築するって感じにしたら高速になるよね
→ デフォルトではサーバーレンダリング結果の HTML と CSS だけ返却して、ブラウザで JavaScript を実行したい UI がある場合はその部分にだけ明示的に宣言させよう
みたいな感じだと理解
雑感
.astro っていう ほぼ JSX の独自記法があるが、個人的にはこのアプローチには賛成
React だと jsx や tsx で書くことになるけど、あくまで JavaScript なので JS で予約されている構文と HTML の記述がバッティングすることがあってキモい
（例えば HTML の class 属性を className って書かないといけなかったり)
最近の Web 開発だと結局 TypeScript→JavaScript のトランスパイルはほぼ必須なのでそれが違う独自記法からのトランスパイルになるだけでそこまで違和感はない
アプリケーションによって向き不向きはありそう
ブログやニュースサイトみたいな静的コンテンツが多いアプリの構築はもうこれでいいじゃんっていうぐらい好感触
逆に例えば、データ分析系ツールみたいなユーザーとのインタラクションが多いアプリには不向き。JavaScript の使用を頻繁に宣言しないといけないし、サーバーサイドで一部のコンポーネントをレンダリングする仕組み自体は React にも組み込まれる見通し(React Server Components)なので Astro をわざわざ導入するメリットが薄くなる
Astro 公式もそういう場合は Next.js とか使ってねという立ち位置(https://docs.astro.build/en/concepts/why-astro/#content-focused)
React とかと組み合わせると CSS の書き方が 1 つのプロジェクトで 2 通りできることになってキモい
Astro に他の UI フレームワークを組み合わせると起きる問題。.astro の記法と他の UI フレームワークの記法は違うので。CSS は UI フレームワーク側で書いて Astro は呼び出すだけみたいな運用すればいいけど
終わりに
Astro 使って個人ページとか作ってみてもいいなと思いました。
実際使うことで見えてくるものはまた違うと思うので、何か書けそうなものがあればまた記事にしたいと思います。
Discussion