コード日進月歩

しんくうの技術的な小話、メモ、つれづれ、など

JavaScript関係におけるハイドレーション(Hydration)とはなにかざっくりまとめる

平然とハイドレーションというフレーズが出てきてしまい、機械和訳だと「水分補給」になってしまうのでのでざっくり調べる

出典

Hydration (web development) - Wikipedia)

言葉の意味

SeverSideRendering(SSR)に関連する用語で、サーバサイドである程度ReactなどのDOMを構築して、ブラウザ側に返却するがその際にイベントリスナーなどを行わないといけないので、そのような活きた状態に活性化する処理をハイドレーションという。

下記の説明がわかりやすかったので転載します。

SSR にはHydration という処理をどうしても挟む必要があります。ページ中に存在する全てのコンポーネントソースコードを DL して、それを実行して、(onClick プロパティなどで渡された) イベントリスナーを DOM に登録していきます。(中略)イベントリスナーが設定されないと、ユーザがクリックしてページに変化を起こすことはできないですし、コンポーネントソースコードを DL しないと、イベントリスナーの実装や、コンポーネントを再レンダリングした時に、どんな DOM へと書き換えるべきかの情報も得られません。そのため SSR では Hydration がどうしても必要な操作になってきます。 - qwik の発明、及びマイクロフロントエンドへの活用について - mizdra's blog

関連リンク