React CSR: The waterwheel model

When I first understood React CSR, I used the analogy of one-way data flow as a waterfall model:

Waterfall model: Components are organized by props (water pipe) and state (water source), and the data flow between components is similar to a waterfall. The flow of data is always from ancestor to descendant (from root to leaf), there is no reverse flow

(From Deep React)

A single set of a microscopic perspective, we understood the props for pipe (data channel) and receiving external data passed in (water), every state is a water source (imagine spring water, that is, produce data), will the tree through the props can be connected with the pipeline components set up, has formed a top-down flow (waterfall) :

Imagine the entire wall of the waterfall above has numerous springs, with the state value running down the props pipeline

From a larger perspective, the component tree is like a series of water wheels connected by bamboo tubes. The data is the water (state, props, Context, and external data sources), and the water flows from top to bottom through the tree to the leaf component, rendering a nice view

First, feel the bamboo pipe water through a picture:

Then feel the water source and the overall operation of the water wheel:

The small bucket on the left is the external data source. At any time, a ladle is ladled into a component (bamboo tube) to make its internal state (water storage) change, and the changed water flow reaches the leaf component through the whole subtree to render the changed view. This is the component update process when data changes due to interactive operations

React SSR: The Trisolaran model

In CSR mode, water is understood as data, which is also applicable to SSR, but the process is slightly more complicated:

  1. Server-side rendering: Inject data on the server side to build a tree of components
  2. Serialized to HTML: dehydrated adult dry
  3. Client render: Soak in water when you arrive at the client, activate water flow, and become a living person

The survival mode of trisolaran is similar to that of hydrating adults at the beginning of chaos era (server rendering part in SSR), and then reactivating with water after constant era (client hydrate part in SSR).

Drink water (render)

The first thing to do is to have water, so pull the data (water) and complete the first rendering of the component (mount) on the server side:

That is, to build the initial component tree based on external data, only perform render and a few life cycles before, in order to shorten the life-saving move forward as much as possible, as soon as possible dehydration

Dehydrate

The component tree is then dehydrated so that it can “survive” in a simpler form in harsh environments, such as a client-side environment with JavaScript disabled

Simpler forms than component trees are HTML fragments, stripped of the moisture of life (dynamic data) and transformed into static snapshots like dried specimens:

The in-memory component tree is serialized into static HTML fragments that can still be seen as human (the initial view) but can no longer be interacted with, but the portable form is especially suitable for transport and can be sent over the network to a client on Earth

Water hydrate

Once you arrive at the client, if the environment is right (JavaScript is not disabled), you immediately start “soaking” and the component recovers

The process of the client “soaking” essentially recreates the component tree, infusing it with fresh water (state, props, Context, etc.) and bringing it back to life by stuffing the live component tree into the wizened shell rendered by the server:

Waterflooding is actually more powerful than trisomaran immersion resuscitations. It fixes limb damage (missing HTML structures will be recreated), but it doesn’t correct minor issues like mouth and eyes.

P.S. soaking also takes a certain amount of time, so in SSR mode, the client cannot interact normally for a period of time, and can only be resurrected completely after water injection is completed (one-way data flow and interaction behavior return to normal).

The resources

  • Trisolaran I: Earth past

  • Trisolaran II: Dark Forest

It is good to have gained and confused

Follow the “front end back” wechat official account and you will receive a series of “heart original” high-quality technical articles on topics including but not limited to front-end, Node.js and server-side technologies

This article was originally published on ayqy.net. The original link is www.ayqy.net/blog/ssr-hy…