リアクティブJavaScript：フロントエンドアーキテクチャーの進化（上） - リアクティブJavaScript：フロントエンドアーキテクチャーの進...：Computerworld - Nikkei Business Publications

TOP ＞ Software ＞リアクティブJavaScript：フロントエンドアーキテクチ...

ハイドレーションとは

Credit: drmakete lab

　フロントエンドアーキテクチャーを進化させる取り組みの中で現在スポットが当たっているのがハイドレーションだ。その意味や、モダンなフロントエンドアーキテクチャーにおけるハイドレーションの重要性を理解するには、まずはリアクティビティの全体像を押さえておく必要がある。

　リアクティビティを実現するためにフレームワークが扱わなくてはならない要素は3つある。「フレーム／ビュー（表示）」「ビヘイビア（振る舞い）」「ステート（状態）」だ。フレーム／ビューはHTMLやCSS、ビヘイビアはJavaScript、ステートはデータに相当する。

　これらに対してフレームワークが果たす役割は、ビューの枠組みを配置すること、ステートを保持すること、ビューとステートとの連携を管理することである。MVCパターンをご存じであれば、似たような話を聞いたことがあると思う。

　この3つの要素がそろえば、ユーザーに向けてページをきちんと表示し、インタラクティブに操作してもらうことができる。

　基本的で素直な手法を用いるとしたら、クライアント（Webブラウザー）が必要とする要素一式、すなわちフレームとリアクティブなコード、ステートを、サーバーから単純に送る。これを受けてクライアントは、枠組みの表示（つまりUIの描画）とJavaScriptの解釈、ステートの関連付けを行う。

　この手法の単純さは大きなメリットだ。コードの動作がシンプルになり、そのコードを読む人間にも理解しやすい。一方で、最初にページを描画するときに、一連の処理がすべて終わるのを待たなくてはならない点が大きなデメリットだ。ネットワークやブラウザーが一生懸命に処理をこなしている間、ユーザーは待つしかない。また、何らかの配慮をしない限り、表示したページが最終的なレイアウトとして整うまでの流れがスムーズでないことが多く、見栄えがあまりよくない。

　そこで、最初のページをサーバー側でまずレンダリングし（SSR：サーバーサイドレンダリング）、その結果をクライアントに送る手法が取り入れられるようになった。こうして、ある程度の外観を持つページをユーザーにいち早く見せ、その裏で残りのコードとステートの送信や動作に対応できる。かなり単純化した説明だが、これが基本的な背景となる考え方だ。

　ページを表示する際に、最初の基本的なレイアウトが表示されるまでの時間をFCP（First Contentful Paint）という。また、ユーザーが実際にページを操作できるようになるまでの時間をTTI（Time to Interactive）という。

　そしてハイドレーションとは、最初に送ったページにインタラクティブ性を加えることを表す。