00 RSC · Flight · HTML · from first principles

One request starts one server render.
It produces two things the browser needs — and the order is strict.

A React Server Components app does not turn your tree into plain HTML and forget it. One render produces a Flight payload — the data model of the Server Component tree — and a stream of HTML the browser paints first. They can be produced at overlapping times, but the dependency never reverses: HTML is downstream of the server-rendered React result. Press play and follow one request all the way to an interactive page.

01 One source, a strict dependency

HTML and Flight are not two unrelated outputs

Flight is the React data model for the Server Component render. The HTML stream is produced from the renderable result of that same model. They may be produced and streamed at overlapping times, but the dependency is one-directional.

Server Components run
  ↓
Flight rows are produced
  ↓
React DOM Server uses the result to produce HTML
  ↓
the browser paints the HTML
  ↓
the browser uses Flight + client JS to hydrate

02 The subtle part

Overlap in time is not the same as independence

Two facts about this pipeline sound like they contradict each other. The server streams — it flushes HTML for finished regions while slower regions are still rendering, so work overlaps in time. And yet the order is strict — a region's HTML can never appear before that region's Flight. Both are true, because they describe two different axes.

the truth sits between two tidy but wrong models

03 Three artifacts, three jobs

HTML, Flight, and client JS each answer a different question

The browser receives three things from one render. They overlap in content — they describe the same UI — but each exists for a different consumer. Tap each to see the question it answers.

04 The first thing that happens

Server Components run first

A Server Component is a function the server calls. It can fetch data, read the filesystem, call server-only code, or await async work. React turns its returned tree into the Flight payload — not into component code sent to the browser.

app/page.tsx · a Server Component

// app/page.tsx
export default async function Page() {
  const posts = await db.posts.findMany()

  return (
    <main>
      <h1>Posts</h1>
      <PostList posts={posts} />
    </main>
  )
}

- rendered Server Component output
- serialized props
- placeholders for suspended async work
- references to Client Component modules

05 The most common confusion

Server Components are not missing from the HTML

It is tempting to think Server Components only become Flight while Client Components are what become HTML. That is not right. A Server Component can absolutely produce visible UI — it simply does not ship JavaScript for it.

app/page.tsx · a pure Server Component, no client code

export default function Page() {
  return (
    <main>
      <h1>Hello from the server</h1>
      <p>This is a Server Component.</p>
    </main>
  )
}

06 Where the client begins

Client Components appear as boundaries

Add a Client Component and React cannot treat it like a Server Component — the "use client" directive marks it. The server records a reference to it, server-renders its initial HTML so the page is not blank, and the browser brings it to life later.

import Counter from "./Counter"

export default function Page() {
  return (
    <main>
      <h1>Dashboard</h1>
      <Counter initialCount={0} />
    </main>
  )
}

"use client"
import { useState } from "react"

export default function Counter({ initialCount }) {
  const [count, setCount] = useState(initialCount)
  return <button onClick={() => setCount(count + 1)}>
    {count}
  </button>
}

07 What React DOM Server emits

One response can contain both HTML and Flight

React DOM Server does not only render Client Components to HTML. It produces HTML for the renderable result of the whole tree — Server Component output, server-rendered Client Component markup, Suspense placeholders, and the marker scripts that fill streamed regions later. On the first load, that HTML arrives in the same response as the inlined Flight data.

08 Two milestones, not one

The browser paints first, then hydrates

When the response arrives, the browser can paint the HTML before the page is interactive. Client JS loads, React reads the inlined Flight data, client modules load, and hydration attaches event listeners. A page can be visible long before it can respond to a click.

09 The difference that actually matters

Server vs Client — the real split

The useful contrast is not "Server Components produce Flight, Client Components produce HTML." Both can produce HTML. The real difference is what each can do and what each ships.

What "React DOM Server walks the tree" really means

In older SSR you could imagine React walking the tree, calling every component the same way, and turning the result into HTML. In an RSC app the tree is split by capability — React does not treat every component the same. Tap a branch.

10 Lock it in

HTML is downstream of the server-rendered React result

The two streams can overlap in time, but they are not independent. There is no need to imagine Server Components disappearing from HTML — they are part of the server-rendered output. They just do not become JavaScript components in the browser.

Four myths this corrects

Each card is a tidy mental model that quietly breaks. Tap one for the correction.