静的サイトジェネレータの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ページが表示されます。パーソナライズが必要なコンポーネントの部分にはプレイスホルダーが埋め込まれています。

fig

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

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

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

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

COMMENTS


Recommended

TITLE
CATEGORY
DATE
Malwarebytes、SolarWindsを攻撃したハッカーらによる攻撃を確認
IT関連
2021-01-20 21:27
Tesla、ビットコインでの車購入をまずは米国で可能に
企業・業界動向
2021-03-25 12:19
事業にインパクトあるデータ活用を提案–フライウィール横山CEOの意気込み
IT関連
2023-04-05 02:19
タクシーの車窓を“広告枠”に 空車の走行時間を活用、S.RIDEが新サービス
企業・業界動向
2021-03-18 03:09
医療VR・デジタル治療VRのジョリーグッドが10億円を調達し累計調達額約22億円に
VR / AR / MR
2021-01-22 11:17
エバーブルーテクノロジーズ、帆船型ドローン実用モデル「everblue AST-201」トライアル販売の予約を開始
IT関連
2022-02-03 07:13
日本企業の変革への強い思いを感じる–ビジネスエンジニアリング・羽田社長
IT関連
2025-01-11 21:07
衛星データプラットフォームTellusが衛星データとAI画像認識技術による駐車場検知ツール「Tellus VPL」α版を無料提供
宇宙
2021-08-20 01:45
WHIとサイダス、新製品「COMPANY Talent Management」を提供–日本企業向けに使いやすさなど追求
IT関連
2024-11-16 04:44
巨大テック企業を規制する米国の新たな独占禁止法案の方針
ネットサービス
2021-02-06 13:48
「ChatGPT」を使って無料で手書きメモをデジタル化する方法
IT関連
2024-06-28 23:34
福岡市の税理士法人、Dropboxの電子署名サービス導入–「kintone」と連携
IT関連
2021-06-22 00:57
患者の負担を軽減する液体生検を用いた白血病遺伝子検査提供のLiquid Mineが資金調達
VC / エンジェル
2021-02-04 14:40
[速報]マイクロソフト、Copilotを一連のタスクを自律的に実行できる「エージェント」へと拡張。受注したら在庫確認して顧客へ発送などが可能に
Microsoft
2024-05-22 10:00