AstroでのWebサイト開発

Astroは、パフォーマンスに優れたWebサイトを構築するためのWebフレームワークです。コーポレートサイト、マーケティングサイト、メディアサイト、ドキュメントサイト、ブログなど、コンテンツ中心のサイトを開発するのに向いています。

とくにSEOやSNSで紹介されたときに使われるOGPが重要なサイトにAstroは適しているでしょう。

Astro公式サイト

Astroの特徴

Astroには、アイランドと呼ばれるアーキテクチャがあり、ページをコンポーネント(部品)ごとに分けて、それぞれを静的生成、UIフレームワークなどで表示できます。
これにより、一部のコンポーネントの表示速度が遅くなっても、他のコンポーネントは高速に表示できるため、ユーザーには高速なページ表示が提供できます。

UIフレームワークは、React、Preact、Svelte、Vue、SolidJSなど人気のUIフレームワークから選ぶことができます。特定のUIフレームワークに依存しておらず、ページ内で複数のUIフレームワークを混在させることも可能です。

また、コンテンツデータを管理するためのコンテンツコレクションという機能もあり、コンテンツデータをMarkdownやMDX、YAMLやJSON形式で管理できます。
コンテンツデータが大規模になったとしても、静的生成とSSR(サーバーサイドレンダリング)を混在させるなど、柔軟な運用が可能です。

Astroを採用すべきでないケース

Webサイト以外を開発する場合、たとえば次のような場合は他のフレームワークの方がよいでしょう。

  • 管理画面などのWebアプリケーションの開発
  • API自体の開発

継続的な開発と保守

Astroは現在も開発が活発でアップデートが頻繁にあるオープンソースプロジェクトです。
Astroで作られたWebサイトは作って終わりではなく、運用しながらその保守が必要なことも考慮する必要があります。

ピクセルグリッドでは、Astroの特徴を活かしたWebサイトの開発と保守までお手伝いいたします。

ピクセルグリッドの事例

CodeGrid

ログインユーザーごとの表示をSSRで行い、お気に入りなどの機能はAstroアイランドを活かすことで、高速なページ表示を実現しています。

メディアサイト

www.pxgrid.com

コンテンツコレクションを利用してコンテンツをMDXで管理しています。また、ヘッドレスCMSを使わないコンテンツ管理を実現しています。

コーポレートサイト

Astroへの貢献

ピクセルグリッドにはオープンソースとしてのAstroにも貢献しています。

中村享介

Astro公式ドキュメントの日本語ドキュメントの翻訳をお手伝いしました。Open Collectiveにて毎月の寄付も行っています。

中野祐人

Astro公式ドキュメントの日本語ドキュメントの翻訳をお手伝いしました。

杉浦有右嗣

Astroを使う上で見つけたバグの修正で貢献しました。

技術情報公開

Software Design 2022年11月号

特集記事にて、Astroを使ってサイトを生成してデプロイする記事を寄稿しています。

  • 寄稿 特集:いまJamstackを始める理由
    中村 享介

CodeGrid

Astroを紹介するシリーズ記事を掲載しています。

Astroを使ったWebサイトを検討されているのであれば、経験豊富なピクセルグリッドにご相談ください。

お問い合わせ