Designing Streaming-First UIs

Modern UIs often depend on data and computation that finish at different speeds. If we treat the entire screen as a single “ready or not” unit, users end up waiting for the slowest part, even when most of the UI is already usable. In practice, this feels like a full-page spinner that blocks navigation and context, blank states that replace already-known layouts, and a UI that pops all at once after an awkward pause, often forcing users to reorient and making the app feel slower than it actually is. This leads to delayed first impressions, overuse of global loading screens, and a scattered, fragile coordination logic across components.

React 19’s streaming shifts the focus from “how do we load faster?” to “how do we reveal UI safely in stages?” A streaming-first UI is structured so partial readiness is expected and intentional, with progress controlled by the renderer rather than manually orchestrated in application code.

Designing streaming-first UIs with Suspense

A streaming-first UI starts with the idea that not every part of the screen is equally important or equally slow. Some regions provide orientation and control, while others add detail or secondary information. React can commit UI incrementally, but only if the component tree makes these distinctions explicit.

In React, streaming is shaped by Suspense boundaries. Anything outside a Suspense boundary should be immediately commit-ready. Anything inside can be delayed until its data or dependencies are ready. Designing streaming-first UIs means deciding which parts must appear together and which can arrive independently.

Streaming-first design replaces component-level loading logic with renderer-controlled commit scopes. You decide where UI may appear, not when data resolves. Each scope is a meaningful unit that can safely appear on its own. The shell is typically the outer scope, encompassing navigation, headers, and primary actions that keep the user oriented. Inner scopes represent more expensive or less critical regions.

A streaming-first design is not about splitting the UI into as many pieces as possible. Too many boundaries can break visual coherence: small UI fragments pop in independently, layouts shift repeatedly, and users are forced to mentally reassemble the page as pieces arrive. Instead, align boundaries with ...