Issue #1

Rendering time

React components is DSL

<App />

React.createElement(App)

{
  $$typeof: Symbol(react.element)
  props: { ... },
  type: ...
}

HTML string

React on server is a templating engine

SSR = DSL => HTML

🤔

You don't need React to render React

ReactDOMServer.renderToString(<App />)

a tree

rendering

• walk recursively
• render every node
• ???
• PROFIT!

Solved in React 16

Issue #2

Initial state fetching

What makes fast SSR?

• Fast serialization ✅

• Fast data fetching 🤔

• Small payload 🤔

Fast data fetching

+

Small payload

=

fetching minimal required amount of data

fetching minimal required amount of data

=

data required to render requested route

Best way to know data requirements for current route?

Colocate data needs within componets

matching route

colocated data requirements

ignored subtree

Problem

non-blocking IO

in Node

Rendering flow

• Start rendering ✅
• Fetch in componentWillMount ✅
• Rendering is done ✅
• Async fetching is done ❌
• Rendered HTML w/o data ❌

Existing solutions

Render twice

😭

Fetch everything before rendering

😭

Predefine data requirements for every route

😔

Colocate data needs in static methods & use React Router ...

🏚

Solution?

blocking IO & threads

Rendering flow

• Start rendering ✅
• Fetch in componentWillMount ✅
• Blocks rendering ✅
• Fetching is done ✅
• Rendering continues ✅
• Rendering is done ✅
• Rendered HTML w/ data ✅

Not a silver bullet

🚅

• Requires threads

• Can't run in parallel

Product question