What Does Hydrate Mean in React SSR?

React CSR: Water Wheel Model

When understanding React CSR, I made a metaphor, comparing unidirectional data flow to waterfall model:

Waterfall model: Components are organized by props (water pipes) and state (water source), data flow between components is similar to waterfall. Data flow is always from ancestors to descendants (from root to leaves), never against the current

(From Deep Dive React)

From micro perspective of single component, we understand props as water pipes (data channels), receiving data (water) passed from outside, each state is a water source (imagine spring eyes bubbling, that is where data is generated), standing up this component tree connected by props pipes, forms downward water flow (waterfall):

Imagine countless spring eyes on the entire waterfall wall above, state values flow along props pipes

From grander perspective, component tree is like a series of bamboo pipes connected into water wheel, data is water source (state, props, context and external data sources), water flows from top to bottom through entire component tree to leaf components, rendering beautiful views

First feel bamboo pipe water transport through an image:

Then feel water source and water wheel's overall operation:

Small bucket on left is external data source, scoop up a ladle anytime and pour into some component (bamboo pipe), letting its internal state (stored water) change, changed water flow passes through entire subtree to leaf components, rendering changed view, this is component update process when interaction operation causes data change

React SSR: Trisolaran Model

Under CSR mode, we understand water as data, equally applies to SSR, just process is slightly more complex:

Server-side rendering: Inject data on server, build component tree
Serialize to HTML: Dehydrate into dried person
Client-side rendering: After reaching client, soak in water, activate water flow, become living person again

Analogy to Trisolaran's survival mode, when chaotic era comes first dehydrate into dried person (server-side rendering part in SSR), when stable era arrives then soak in water to resurrect (client-side hydrate part in SSR)

Drinking Water (render)

First must have water to dehydrate, so first need to fetch data (water), complete component's first render (mount) process on server:

That is build initial component tree according to external data, during process only execute render and several lifecycle methods before it, is to shorten wind-up of life-saving move as much as possible, dehydrate as soon as possible

Dehydration (dehydrate)

Then dehydrate component tree, enabling it to "survive" in harsh environment in simpler form, such as client environment with JavaScript disabled

Simpler form than component tree is HTML fragment, dehydrate life's moisture (dynamic data), become static snapshot like wind-dried specimen:

Component tree in memory is serialized into static HTML fragment, can still look like human (initial view), but already cannot interact with it, but this portable form is especially suitable for transport, can be transmitted through network to some client on Earth

Hydration (hydrate)

After reaching client, if environment is suitable (JavaScript not disabled), immediately start "soaking" (hydrate), components revive accordingly

Client "soaking" process is actually recreating component tree, injecting newborn water (state, props, context etc.) into it, and stuffing living component tree into server-side rendered shriveled shell, making it resurrect:

Hydration resurrection is actually more powerful than Trisolaran soaking revival, can repair limb damage (missing HTML structure will be recreated), but doesn't correct minor problems like crooked mouth and slanted eyes (ignores problems like extra/missing attributes, attribute value mismatches, etc., specifically see React SSR Principle Section)

P.S. Soaking also needs certain time, so under SSR mode, client has a period of time unable to interact normally, can only completely resurrect after hydration completes (unidirectional data flow and interaction behaviors both return to normal)

Reference Materials

[Three Body I: Earth Past](/articles/三体 i：地球往事/)
[Three Body II: Dark Forest](/articles/三体 ii：黑暗森林/)