現在のWebのフロントエンド開発での制作対象は、大きく「Webアプリケーション」と「Webサイト」の2つに分類できます。Webアプリケーションは、ユーザーの入力に応じて情報を処理し、結果を表示するもので、SNSやECサイトが代表例です。一方、Webサイトは、ブログやニュースのように、あらかじめ用意された情報を静的に表示するのが主目的です。ここで紹介する「Astro」は、後者のWebサイト制作で真価を発揮するフレームワークです。
コンポーネントベース開発による効率アップ
従来のWebサイト制作では、ページごとにHTMLファイルを作成し、それぞれに対応するCSSやJavaScriptを記述するのが一般的でした。しかしこの方法では、複数ページで共通して使われるメニューやフッターといった要素を、すべてのHTMLファイルに用意する必要があります。そのため、制作の途中で変更が発生した場合、修正漏れといった人為的なミス（バグ）を誘発する原因になっていました。
この問題を解決するのが「コンポーネントベース開発」です。これは、UIを構成する要素を、再利用可能な独立した「コンポーネント」という部品として管理する手法です。例えば、「 画像とキャプションのセット」を1つのコンポーネントとして定義しておけば、あとはその部品を必要な場所に配置し、画像やテキストといった差分データを与えるだけで、同じ構造の表示をいくつでも生成できます。
この手法により、修正作業が簡略化されて開発効率が向上するだけでなく、コードの保守性も高まります。このコンポーネント（Web Components）という仕組みは、Astroだけでなく、VueやReactといったWebアプリケーション開発用のフレームワークでも広く採用されている、Web標準の技術です。
静的サイトジェネレータ（SSG）による圧倒的な高速化
コンポーネントベース開発は非常に強力ですが、ページ表示時にブラウザ上でJavaScriptを実行してコンポーネントを組み上げるため、レンダリングに時間がかかるという問題があります。ユーザーの個別の操作に対する丁寧な対応が求められるWebアプリケーションではある程度許されますが、情報を素早く届けることが主目的であるWebサイトにとっては大問題です。
Astroは、この問題を「静的サイトジェネレータ（Static Site Generators、略してSSG） 」という仕組みで解決します。SSGとは、開発者がコーディングを終えた後、Webサーバーにアップロードする前に、バラバラのコンポーネントをあらかじめ結合して、完成形の静的なHTMLファイルを生成しておく方式です。ユーザーがサイトにアクセスしたとき、ブラウザはすでに完成しているHTMLファイルを読み込んで表示するだけで済むため、JavaScriptによる動的ページ生成処理が不要となり、極めて高速な表示が可能になります。
図1「SSGの仕組み」
サーバーサイドレンダリング（SSR）による動的サイト対応
SSGは静的サイトの表示を高速化しますが、その性質上、ユーザーの操作に応じて表示内容が変化する「動的サイト」には対応できません。そこでAstroは、動的な機能が必要な場合のために、「 サーバーサイドレンダリング（Server-Side Rendering、略してSSR） 」を採用しています。
SSRを理解するために、一般的なWebアプリケーションで用いられる「クライアントサイドレンダリング（Client-Side Rendering、略してCSR） 」と比較してみましょう。
CSR（クライアントサイドレンダリング）
最初に最小限のHTMLとアプリケーションの動作に必要なJavaScriptコードを読み込み、その後の画面描画はすべてユーザーのブラウザ（クライアント）側で行います。ページ遷移の際にサーバーと通信する必要がないため、一度読み込んでしまえば軽快に動作するアプリケーション（SPA：シングルページアプリケーション）を構築できます。しかし、読み込み時に多くのファイルをダウンロードする必要があるため、初回表示が遅くなるというデメリットがあります。
図2 CSRの仕組み
SSR（サーバーサイドレンダリング）
ユーザーからページのリクエストがあるたびに、Webサーバー側でJavaScriptを使って動的にHTMLを生成し、それをブラウザに返します。ブラウザは完成したHTMLを受け取って表示するだけなので、CSRのような読み込みの遅延がなく、高速な表示を実現できます。これはPHPやJavaによる古くからあるサーバーサイド技術と同じ仕組みです。このような、ページごとにサーバーからHTMLを取得して表示するアプリケーションは、「 MPA（マルチページアプリケーション） 」と呼ばれます。
図3 SSRの仕組み
Astroは、Webサイトのパフォーマンスを最優先にしているため、動的な処理が必要な場合でもCSRではなく、高速表示を維持できるSSRを提供しているのです。
Astroは、SSGによる圧倒的な表示速度を特徴とし、SSRによって動的サイトにも対応できる、効率的でモダンなWebサイト制作フレームワークです。高速性が求められる「ヘッドレスCMS」や「マイクロサービス」のフロントエンドとしての採用も増えており、現在のWeb開発における要注目の技術の1つと言えるでしょう。
