hydrationの大まかな流れ

SSR/SSGなどを用いて、Server側で事前にHTMLを生成しておく

アクセスがあったときに、以下を行う

その生成済みのHTMLを返却する

生成済みのHTMLは即座にbrowserに表示される

この部分ではJSがattachされていないmrsekut.icon

Chrome DevToolsでJavaScriptを無効にして、buttonをclickしてみたりすれば良い

何も反応しないことがわかる

それに関するJavaScriptを返却する

Componentのコードをdownload

つまり、JSをdownload

Componentのcodeを実行

例えば、JSのparseや実行

applicationのstateや、frameworkのstateを復元する

前者は例えば、useStateで作ったstate

後者は例えば、component tree

event handlerをDOMなどにattachする

特に、このJSに関する部分のことを指してhydrationと呼ぶことも多いと思うmrsekut.icon

この間の待ち時間のことをhydrationにおけるuncanny valleyと呼ぶ

通常のhydrationではこの部分が問題になるので、ここを解決する様々な試作が考えられている

clientでないとJSを実行できないというのはどういう意味？

JSもserver上で実行した上で、返却することはできないの？

これはできないmrsekut.icon

例えば、以下のようなJSたちが何をやっているか考えればわかる

ユーザのインタラクションに反応するlistenerとか

code:js

window.addEventListener("scroll", function() {

console.log("You're scrolling!");

});

browser APIを使ったものとか

code:js

navigator.geolocation.getCurrentPosition(function(position) {

console.log("Latitude: " + position.coords.latitude);

console.log("Longitude: " + position.coords.longitude);

});

こういうのをserver側で実行したところで無意味なので、clientに送ってきてからJSの準備をして、この辺を使える状態にしないといけない

それがhydration

参考