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
ロシアや北朝鮮などの脅威アクターによるLLM悪用、マイクロソフトとOpenAIが報告
IT関連
2024-02-16 14:14
日立製作所、2024年3月期は減収増益–生成AIなどに1兆円の追加投資を発表
IT関連
2024-05-01 15:56
NVIDIAの新チップ「H100」、AIによる人間理解の加速を目指す
IT関連
2022-05-11 15:11
日立とハピネスプラネット、チーム自動作成機能で社内コミュニケーションを改善
IT関連
2022-08-11 05:27
OBS経由でZoomビデオ会議に利用可能、PCとウェブカメラだけでVTuber用アバターが使えるシステムが無償公開
IT関連
2022-02-02 05:16
ガイアックスが日本初の「スマートシティ実現に向けたLiDARデータ活用アイデアソン&ハッカソン」を9月30日開催
イベント情報
2021-08-06 09:26
プログラマーアイドルユニット「電脳カプセル」がメンバー募集 プログラミング経験問わず
企業・業界動向
2021-06-22 17:08
「ウイルスに勝てませんでした」 シャープ「プラズマクラスターシューティング」は予想外の弾幕ゲーム
くらテク
2021-08-03 18:34
インテリジェントコンテンツ管理で企業の非構造化データ活用に革新を–Box Japan・古市社長
IT関連
2025-01-08 12:31
ソニー、FeliCaとスマホで座席管理の新サービス 机にカードを貼るだけで設置完了
企業・業界動向
2021-06-08 04:29
ネクストミーツ、デジタルおよびサステナブル基盤としてクラウド型ERPを導入
IT関連
2022-09-16 05:15
「生成系AIは3億人の雇用に影響」、ゴールドマン・サックスが予測
IT関連
2023-03-31 11:42
台湾のTeamT5が日本に本格進出–北東アジアのサイバー脅威に強み
IT関連
2022-09-16 07:27
レッドハット、2021年の事業戦略はOpenShiftに集中
IT関連
2021-04-14 18:38