hydrate

簡単にいうと：

HTMLはスカスカのミイラ

動くように水を与える（イベントリスナのアタッチ） by fukabori.fm

SSR(Server Side Rendering)は、SPA起動方法のバリエーションの一つで、Reactで言えば

1.利用者がWebサーバに初回接続してきたとき、サーバサイドのJS実行系(Node,AWS lambda,エッジサーバ,Next.js..)で、Reactアプリを実行してDOM構築、さらにDOMをレンダリングしてHTMLを文字列として生成(renderToStringまたはrenderToNodeStream)し、ブラウザにHTMLとして返却。

2.ブラウザでHTMLとして受け取って、ブラウザがレンダリングして画面表示。このとき、HTMLの要素にノードidが付与されていて、Reactの仮想DOMの処理における差分検出の準備ができている。

4. bundle.jsロード後にReactアプリがブラウザ内で再度実行され、SPAとして起動する。この時、ブラウザ内で仮想DOMを生成した上でDOM生成しようとするのだが、すでに2で作られているDOMとの差がなければDOM生成は何もしない。一般にはそうなる。さらに要素に対するReactアプリとしてのイベントリスナのアタッチを行う(ちなみにこのステップをhydrateと呼ぶ)

5. 加えて、Reduxなどの状態管理ライブラリを併用しているとき、サーバサイドでReduxが初期生成した状態データをクライアントに転送し、実行継続を行うこともできる。