Things to consider when doing
Server Side Rendering
Sebastian Siemssen (@thefubhy)
On the initial request server renders and returns the required components as a string.
From that point on, the client takes over rendering duties.
The core principle
Why?
Perceived Performance
Search Engine Optimization
How?
Client
Server
Requests Website
Start Rendering
Asynchronous Operations
Return Document
Receive Document
Render Statically
Hydrate React
User Interaction
Return Data
Update Document
Server
Client
The application code is shared between the server and the client
Different entry point and initialization logic for client and server
Webpack
Too simple?
Rehydration is hard
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.
Rehydration is hard
Serialize any state and data
Determine all required code chunks
Observe any relevant side effects in general
Be careful with environment dependent conditions
Prefetching data
When fetching data on the server, we need to delay the response until all data dependencies have been resolved.
Prefetching data
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
What's new?
More efficient
React 16
React 15
More lenient and considerate during client side hydration
Does not throw away everything on a single character mismatch
Can compare subtrees individually
Better performance
Streaming support
Changes
React 15
React 16
Backwards compatible until React 18
Error Boundaries and Portals don't work on the server
Server Side Rendering
By Sebastian Siemssen
