静的サイトジェネレータの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
Microsoft、クラウドゲーム専用端末を開発中
アプリ・Web
2021-06-12 17:46
複数ブロックチェーン間の取引を実現する相互運用性プロジェクト「YUI」がHyperledger Labsプロジェクトとして承認
ブロックチェーン
2021-06-09 21:53
LINEがデータガバナンスに関する現状認識を発表、海外保管のトークデータを完全国内移転へ
セキュリティ
2021-03-25 07:21
TikTok米国事業のオラクルとウォルマートへの売却、無期限で棚上げ
IT関連
2021-02-12 04:40
Amazon、FTCのリナ・カーン委員長の独禁法調査関与に忌避の申し立て
企業・業界動向
2021-07-02 21:33
「最大の強みはエッジと開発者への注力」–日本の拡大戦略を掲げるFastlyのCEO
IT関連
2024-07-26 06:32
NEC、ServiceNowの法務クラウドサービスを国内初導入–法務領域DXを加速
IT関連
2024-02-06 06:47
マイクロソフト、2021年中にAzureを展開するすべての国のリージョンで「アベイラビリティゾーン」を提供
Microsoft
2021-03-23 18:19
AIへの信頼は高まっている–Oracle幹部が語る財務とAI、RPAと比べたメリット
IT関連
2021-02-15 06:17
デスクトップが美しいLinux「rlxOS」–セキュリティの高さゆえの欠点も
IT関連
2023-12-15 07:49
脳からの命令を自分の手に伝え、動かす 脊髄損傷でも手を動かし触覚を得る試み :Innovative Tech
トップニュース
2021-03-11 21:08
安易に加担、大きい代償 SNSの“闇バイト”で捨て駒にされる若者たち
IT関連
2021-02-11 15:53
グーグル、「Chrome」にリアルタイムの自動字幕起こし機能
IT関連
2021-03-19 13:46
「Windows 10X」、開発中断か
IT関連
2021-05-10 00:57