【Astro No.00】Astroの特徴

AstroはGitHub上では2021年から開発スタートし、2022年にバージョン1.0.0が公開された比較的新しいWebフレームワークです。新しいにもかかわらず、「Google」「Netlify」「trivago」「The Guardian」(イギリス大手新聞)「Nord VPN」「Rokt」(Eコマースのリーディングカンパニー)などの大手企業にも採用されています。

この静的サイト ジェネレーターであるAstroについて紹介します。

公式サイトで紹介される特徴の補足

コンテンツ重視 : Astroは、コンテンツが豊富なウェブサイトを構築するために設計されています。

Astroはアプリケーション向きの設計ではありません。アプリケーションとは例えば、チャットやTodoアプリなどです。言い換えると、動的な処理が組み込まれるJavascriptが必要不可欠なWebサイトは適しておりません。Astroのコンセプトとしては、Javascriptを極力減らすことにあります。よって、Newsサイトやブログなどの静的サイトが適しています。

サーバーファースト : Astroは、クライアントサイドのレンダリングよりもサーバーサイドのレンダリングを可能な限り活用します。

前置きとなりますが、Webサイトのレンダリング方法は大きくCSR(client side rendering)・SSR(server side rendering)・SSG(server side generator)の3つがあります。CSRは、ユーザーのデバイス上で実行されるソフトウェアやプログラムを指します。それに対してSSRは、サーバー上で実行されるソフトウェアやプログラムを指します。SSGは、ビルド時に、サーバー側で、HTMLの構築を終わらせておき、ユーザーからリクエストされた際に事前に作成したHTMLを渡します。

このような設計方針とした理由の一つとして、SSRを使用しない限り、CSRの最初のページ読み込み時のパフォーマンスは、SSRよりも常に遅くなります。これはCSRがページ上のHTMLをレンダリングするためだけに、ブラウザでJavaScriptアプリケーション全体をダウンロード、解析、実行する必要があるためです。さらに、CSRはリモートデータを取得する必要があるため、ページの読み込みが完了するまでに、待ち時間がかかります。

デフォルトで高速 ： Astroで遅いウェブサイトを構築することは不可能です。

一般的にですが、苦労して作成したWebサイトをデプロイしたときに実際のロードが遅いケースはよくあり、そのほとんどの原因は、JavaScriptです。Astroは、Javascriptを極力使用しない方針のため、遅くなるリスクを極限まで減らしています。

また、ロードの速度とアクセス数は強い相関性が証明されているため、速度が速いサイトほど有利であるのは十分に証明されています。

簡単に使える ： 専門家でなくても、Astroで何かを構築できます。

React、Preact、Svelte、Vue、Solid、Litなどはサポートされており、それを使ってAstro コンポーネント(.astro)で新しいUIコンポーネントを作成できます。Astro コンポーネントは、 2 つのコード フェンス (—) の間でJavaScript 変数を定義できます。 その後、JSX のような式を使用して、これらの変数をコンポーネントの HTML テンプレートに挿入できます。Astro コンポーネントは、レンダリング ステップ中に 1 回だけ実行されるテンプレートです。Reactのような複雑なレンダリングの仕組みはありません。以下はAstroコンポートの例です。

---
const name = "Astro";
---
<div>
  <h1>Hello {name}!</h1>  <!-- Outputs <h1>Hello Astro!</h1> -->
</div>

また、以下のようにReact,Vue,Svelteなどのフレームワークを共存させることも可能です。

---
// 例: 同じページで複数のフレームワークのコンポーネントを混在させる
import MyReactComponent from '../components/MyReactComponent.jsx';
import MySvelteComponent from '../components/MySvelteComponent.svelte';
import MyVueComponent from '../components/MyVueComponent.vue';
---
<div>
  <MySvelteComponent />
  <MyReactComponent />
  <MyVueComponent />
</div>

充実した機能と柔軟性 ： 100以上のAstroインテグレーションから選択できます。

UIフレームワークであるReact、Svelte、Vueだけでなく、Tailwind CSS、MDX、画像最適化(@astrojs/image)など、100以上のインテグレーションを使用してAstroを拡張できます。

拡張性が高いのもAstroの特徴のひとつとなります。

最後に

Astro を使用すると、単純なものから必要に応じて複雑なサイトを制作することができます。 つまり、Astro は、静的サイト生成 (SSG) とサーバーサイド レンダリング (SSR) の両方をサポートする強力なフレームワークであり、開発者の効率化を念頭に置きながら、コンテンツベースの Web サイトを高速に構築できます。軽量、効率的、柔軟なため、ブログ、ポートフォリオ、ドキュメント、一部の電子商取引サイトなど、コンテンツが豊富な Web サイトを作成するのに適しています。