Requests Website
Start Rendering
Asynchronous Operations
Return Document
Receive Document
Render Statically
Hydrate React
User Interaction
Return Data
Update Document
Serialize any state and data
Determine all required code chunks
Observe any relevant side effects in general
Be careful with environment dependent conditions
When rehydrating, the client needs to be in the exact same state that the server was in when it returned the rendered string.
Serialize any state and data
Determine all required code chunks
Observe any relevant side effects in general
Be careful with environment dependent conditions
When fetching data on the server, we need to delay the response until all data dependencies have been resolved.
Walk the component tree
Identify all components with data dependencies
Wait for all to finish or fail
Repeat the rendering with loaded data
Extract and serialize the fetched data
React 16
React 15
Does not throw away everything on a single character mismatch
Can compare subtrees individually
React 15
React 16
Backwards compatible until React 18