静的サイトジェネレータの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
Airbnb、売上高はほぼ4倍だがデルタ株を踏まえた消極的な来期予測
企業・業界動向
2021-08-14 10:09
「リヴリーアイランド」スマホで復活 宝石のうんちをする不思議な生き物を育てるゲーム
くらテク
2021-07-16 23:50
IPA、「DX推進スキル標準」に生成AIに関するスキル標準を追加
IT関連
2024-07-09 11:58
宇宙で6年保存した“フリーズドライ精子”からマウス誕生 「人類の宇宙生殖」に可能性
科学・テクノロジー
2021-06-15 21:24
ウクライナのソフトウェア開発者は今どうしているのか
IT関連
2022-04-12 06:26
レッドハット、「Red Hat Summit 2023」発表の新機能などを振り返り
IT関連
2023-06-08 21:59
PelotonのCEOが是正措置は認めるもバイクとトレッドミルの「全生産停止」を否定
IT関連
2022-01-24 08:48
営業DXサービス「Sansan」、セキュリティ評価制度「ISMAP-LIU」の第一号に認定
IT関連
2024-09-15 01:44
「新たな領域の開拓で日本での存在感を強めていきたい」–ペガジャパンの福島新社長
IT関連
2021-07-01 14:16
リチャード・ストールマン氏がフリーソフトウェア財団の理事に復帰
IT関連
2021-03-23 04:29
日立製作所、「環境情報管理サービス」提供–地域企業の脱炭素経営を支援する金融機関に向け
IT関連
2023-08-09 02:35
グーグル、C2PA運営委員会メンバーに–デジタルコンテンツにさらなる透明性をもたらす
IT関連
2024-02-10 02:15
ユニコーン以上の価値があるWorkplaceにスピンアウトして欲しいVCと、それを手放したくないフェイスブック
IT関連
2022-02-01 06:24
「誰にコンテンツを届けないか」–電通が進めるクッキーレス時代のデータ戦略
IT関連
2024-04-12 12:21