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

Server Side Rendering

  • 2,108