Angularが新機能「インクリメンタルハイドレーション」をプレビュー。静的サイトをロード後、JavaScriptが必要になった時点で動的に組み込み

今回は「Angularが新機能「インクリメンタルハイドレーション」をプレビュー。静的サイトをロード後、JavaScriptが必要になった時点で動的に組み込み」についてご紹介します。

関連ワード (快適、説明、開発等) についても参考にしながら、ぜひ本記事について議論していってくださいね。

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


Webアプリケーションフレームワーク「Angular」の開発チームは、次期Angularに搭載予定の新機能「Incrmental Hydratio」(インクリメンタルハイドレーション)をプレビュー公開しました。

We just shared a feature preview of the next step in Angular’s hydration story.

Meet Incremental Hydration. pic.twitter.com/u60q2C2NaC

— Angular (@angular) October 16, 2024

基盤となるハイドレーションとは?

インクリメンタルハイドレーションの基盤となる「ハイドレーション」機能とは、サーバサイドで静的なHTMLを生成し、それをWebブラウザで表示した後で、何らかのイベントをきっかけにJavaScriptをアタッチすることで、後から動的なWebサイトを実現する手法です。

まず最初に静的なHTMLのみを読み込んで表示することで、Webサイトを高速に表示できることが利点となります。

Angularは既にサーバサイドレンダリングによる静的なHTML生成に対応し、ハイドレーションにも対応しています。

そして今回新たに、ハイドレーションをコンポーネントごとに個別に設定できる「インクリメンタルハイドレーション」がプレビューされました。

パーツごとにハイドレーションを設定、実行

インクリメンタルハイドレーションは、Webサイトのパーツごとにハイドレーションを設定、実行できる機能です。必要なときに必要な場所にだけJavaScriptをアタッチすることで、より快適なユーザー体験を実現する手段となります。

下記は公開されたインクリメンタルハイドレーションのデモ動画からのキャプチャです。

まず通常のハイドレーションと同様に、サーバサイドで静的なHTMLが生成され、それがWebサイト上に高速にロード、表示されます(デモでは視覚的に分かりやすいように、JavaScriptがアタッチされていないコンポーネントがモノクロで表示されています)。

fig1

カーソルで検索フィールドをクリックすると、その瞬間に検索フィールドにJavaScriptがアタッチされ、検索機能が有効になります。

fig2

画面左下のハイドレーションの状態を示すウィンドウには、1つのコンポーネント、容量にして1.2kBのJavaScriptがディレイなくアタッチされたことが示されています。

fig3

次にカーソルを商品の上にホバーさせると、その瞬間に商品の一段目のパーツにもJavaScriptがアタッチされ、機能が有効になりました。

fig

インクリメンタルハイドレーションのコード

インクリメンタルハイドレーションを有効にするには、まずApplicationConfigのProvidersクラスで「withPartialHydration」を設定します。

fig5

その上で、アプリケーションテンプレートの「@defer」ブロックでhoverなどでハイドレートするように記述します。

fig6

「@defer」ではさまざまなトリガーを設定してハイドレーションを実行できると説明されています。

fig7

Angularは現在最新バージョンが18となっており、11月にバージョン19がリリース予定です。インクリメンタルハイドレーションもバージョン19で実装が開始されると見られます。

COMMENTS


Recommended

TITLE
CATEGORY
DATE
M1 iMacのイエロー、 オレンジ、 パープルはApple Store専用販売
IT関連
2021-04-24 23:28
バンダイ、一部商品の取扱説明書を完全電子化 “紙”同梱せず SNSで賛否
くらテク
2021-04-23 10:28
企業の生成AI採用率、2026年は80%以上に–ガートナー
IT関連
2023-10-13 12:32
街中でETCが使える「ETCX」始動、駐車場やドライブスルーなどでクルマに乗ったままキャッシュレス決済
フィンテック
2021-04-29 22:20
英国気象庁とマイクロソフト、スーパーコンピューター構築で連携–高度な気象予測を実現へ
IT関連
2021-04-24 14:53
「シン・仮面ライダー」発表で“伏線回収” 庵野監督、東映生田スタジオ跡地をお参り
くらテク
2021-04-06 07:49
「街の電動化」を目指すRevelが50台のテスラ車で全電動配車サービスを開始予定
モビリティ
2021-04-30 00:00
米当局、企業合併の指針を改定へ–IT大手の買収にも影響
IT関連
2022-01-21 21:27
ノートとしてもタブレットしてもハイレベル レノボのデタッチャブルPC「ThinkPad X12 Detachable」
PR
2021-06-17 06:01
マイクロソフト、「Copilot」の企業導入を促す3つの方法論
IT関連
2024-02-22 00:13
タニウム、「Autonomous」がエンドポイント管理の次なる一手に
IT関連
2023-11-28 07:54
グループ全体のデータを可視化–経営管理における「Oracle Fusion Data Intelligence」活用法
IT関連
2024-08-14 12:45
Evernote創業者によるWeb会議ツール「mmhmm」、ソフトバンクGなどから1億ドルのBラウンド増資
企業・業界動向
2021-07-09 09:41
大雨・大雪・浸水を現実世界にAR表示 災害シミュレーターをウェザーニューズが公開
アプリ・Web
2021-01-16 14:04