React SSR における hydrate とは何か？

React CSR：水車モデル

以前 React CSR を理解する際に比喩を作成しました。単方向データフローを滝モデルに例えたのです：

滝モデル：props（水道管）と state（水源）によってコンポーネントを組織し、コンポーネント間のデータフローは滝に類似。データフローは常に祖先から子孫へ（根から葉へ）、逆流することはない

単一コンポーネントの微視的視点では、props を水道管（データチャネル）と理解し、外部から渡されるデータ（水）を受け取ります。各 state は水源（泉眼から水が湧き出る、つまりデータが生成される場所）と想像し、props パイプで接続されたこのコンポーネントツリーを立てると、上から下への水流（滝）が形成されます：

上図の滝の壁全体に無数の泉眼があり、state 値が props パイプを伝って流れるのを想像してください

より巨視的な視点から見ると、コンポーネントツリーは一連の竹管で接続された水車のように、データは水源（state、props、context および外部データ源）であり、水は上から下へとコンポーネントツリー全体を流れて葉コンポーネントに到達し、美しいビューをレンダリングします

まず 1 枚の図で竹管輸水を感じてください：

次に水源および水車全体の稼働を感じてください：

左側の小さな桶は外部データ源で、いつでも一瓢を汲んであるコンポーネント（竹管）に注ぎ、その内部の state（貯水）を変化させ、変化した水流がサブツリー全体を流れて葉コンポーネントに到達し、変化した後のビューをレンダリングします。これがインタラクション操作によるデータ変化時のコンポーネント更新プロセスです

React SSR：三体人モデル

CSR モードでは、水をデータと理解しますが、SSR にも同様に適用できます。ただしプロセスが少し複雑なだけです：

サーバーサイドレンダリング：サーバーサイドでデータを注入し、コンポーネントツリーを構築
HTML にシリアライズ：脱水して干し人間に
クライアントサイドレンダリング：クライアントに到達後、水に浸し、水流を活性化し、生きた人間に戻る

三体人の生存モードに例えると、乱紀元が到来するとまず脱水して干し人間になり（SSR 中のサーバーサイドレンダリング部分）、恒紀元が到来してから水に浸して復活します（SSR 中のクライアント hydrate 部分）

水を飲む（render）

まず脱水できる水が必要なので、まずデータを（水を）取得し、サーバーサイドでコンポーネントの初回レンダリング（mount）プロセスを完了します：

つまり外部データに基づいて初期コンポーネントツリーを構築し、プロセス中は render およびそれ以前のいくつかのライフサイクルのみを実行します。これは命を守る技の前揺みをできるだけ短縮し、できるだけ早く脱水するためです

脱水（dehydrate）

次にコンポーネントツリーを脱水し、悪劣な環境でもよりシンプルな形態で「生存」できるようにします。例えば JavaScript が無効化されたクライアント環境など

コンポーネントツリーよりシンプルな形態は HTML フラグメントで、生命の水気（動的データ）を脱ぎ、風乾標本のような静的スナップショットになります：

メモリ内のコンポーネントツリーが静的な HTML フラグメントにシリアライズされ、人間の姿（初期ビュー）はまだわかりますが、もはやそれとインタラクションすることはできません。しかしこの携帯可能な形態は輸送に特に適しており、ネットワークを通じて地球上のどこかのクライアントに伝送できます

注水（hydrate）

クライアントに到達後、環境が適していれば（JavaScript が無効化されていなければ）、直ちに「浸漬」（hydrate）を開始し、コンポーネントが蘇生します

クライアントの「浸漬」プロセスは実際にはコンポーネントツリーを再作成し、新生の水（state、props、context など）をその中に注入し、生き生きとしたコンポーネントツリーをサーバーサイドレンダリングされた乾いた殻に詰め込み、復活させます：

注水復活は実は三体人の浸漬蘇生よりも強力です。肢体的な損傷を修復できます（欠落した HTML 構造は再作成されます）が、口歪み眼斜などの小さな問題は修正しません（属性が多かったり少なかったり、属性値が一致しないなどの問題は無視します。詳細は React SSR 原理編を参照）

P.S.浸漬にも一定の時間がかかるため、SSR モードでは、クライアントは一定時間正常にインタラクションできず、注水完了後に完全に復活します（単方向データフローとインタラクション行為が正常に回復）

参考資料

[三体 I：地球往事](/articles/三体 i：地球往事/)
[三体 II：黑暗森林](/articles/三体 ii：黑暗森林/)