静的サイトジェネレータのAstro、「Server Islands」を実験的実装。サーバで動的生成したコンポーネントをWebページ表示後に組み込み

今回は「静的サイトジェネレータのAstro、「Server Islands」を実験的実装。サーバで動的生成したコンポーネントをWebページ表示後に組み込み」についてご紹介します。

関連ワード （動的、環境、開発等） についても参考にしながら、ぜひ本記事について議論していってくださいね。

本記事は、Publickey様で掲載されている内容を参考にしておりますので、より詳しく内容を知りたい方は、ページ下の元記事リンクより参照ください。

オープンソースで開発されている静的サイトジェネレータ「Astro」は、新機能の「Server Islands」を実験的実装した新バージョン「Astro 4.12」をリリースしました。

Full details on the blog:https://t.co/jd8GfFwbjB

— Astro (@astrodotbuild) July 18, 2024

Astroは、ReactやVue、Svelte、Alpine.js、TypeScriptなどのさまざまなフレームワークやライブラリに対応した静的サイトジェネレータです。

ビルド時にWebサイト全体のHTMLが生成され、しかもそのHTMLには全くJavaScriptが含まれないか、もしくはWebブラウザ上での動作に必要な最小限のJavaScriptのみが残されます。

JavaScriptによる動的な仕組みが必要なコンポーネントについては、Webブラウザ上に静的HTMLが表示された後など、開発者がHTML上のボタンなどのコンポーネントに対して任意のタイミングを選んで組み込むことができるようになっています。

そのため、非常に高速に表示できるWebサイトの生成を可能にしている点が、Astroの大きな特徴です。

AstroのIslandsはあとからJavaScriptを組み込み

この、あとからHTMLのコンポーネントに対してJavaScriptで動的な機能を組み込める仕組みは2021年からAstroに「Islands」という名前で組み込まれていました。

今回、Astro 4.12で実験的実装が行われた「Server Islands」は、ユーザーごとにパーソナライズされる情報など、サーバ側で動的に生成されるコンポーネントを、「Islands」と同様にWebページ上にあとから組み込むことで、高速なWebページの表示を維持したまま、より動的なWebサイトの構築を実現するための仕組みです。

一般に、ユーザーごとにパーソナライズされたWebページなど、サーバによる動的生成を必要とするWebページは、Webページ全体が動的生成され、それがWebブラウザへ送信されます。そのため、Webブラウザからのリクエストがサーバに届いてから、サーバがHTMLを動的に生成する時間が必要な分、HTMLがWebブラウザに送信開始されるまでに時間がかかります。

また、ユーザーごとに異なるHTMLが生成されるため、CDNなどのキャッシュもしにくくなります。

Server Islandsは先に静的HTMLを配信、あとから動的要素に置き換え

これに対してServer Islandsでは、Webブラウザからのリクエストに対して、まずすべてのユーザーに静的生成されたHTMLが返され、高速にWebページが表示されます。パーソナライズが必要なコンポーネントの部分にはプレイスホルダーが埋め込まれています。

全ユーザーに同じHTMLが配信されるため、CDNなどによりシンプルなキャッシュが有効です。

その上で、あとからパーソナライズが必要なコンポーネントの部分に対して、サーバで生成されたコンポーネントが個別に置き換えられます。個別に配信されるため、サーバの動的生成に時間のかかるコンポーネントがあったとしても、全体のボトルネックになることはありません。

Astroの開発チームは、このServer Islandsを用いたデモサイト「server-islands.com」を公開し、同様のコンセプトであるNext.jsの「Next.js Partial Prerendering」よりも高速であると説明しています。

また、Astroの開発チームによるとServer islandsは移植性を念頭に置いて構築されておりサーバーインフラに依存せず、Node.jsから各種クラウドのサーバレスなどさまざまなホスト環境で実行可能だとしています。