Why streaming matters for web performance
Streaming lets a server send UI to the client progressively instead of waiting for every data dependency to resolve before returning a response. Users see content—like a product's main call to action—immediately, while slower parts of the page finish loading in the background. The largest storefronts on the web rely on this technique to improve Core Web Vitals and conversion rates.
Streaming also prevents slow data sources from blocking initial render, and it parallelizes work on other critical assets such as JavaScript, stylesheets, and fonts.
The role of compute placement
As an application grows, the network distance between clients and a database in a single region becomes a bottleneck. Since the speed of light is fixed, compute has to run close to the data—typically in one region, or two or three depending on data sovereignty and security constraints.
For example, a Vercel Function can stream responses from us-east, close to the data, cutting down network roundtrips between origin and the Vercel region. To further reduce Time To First Byte (TTFB), Next.js is building Partial Prerendering, which pre-generates a static shell of a route and deploys it to every Vercel region. That keeps initial loading fast and consistent while dynamic data streams in from Vercel Functions.
Streaming with the Next.js App Router
The Next.js App Router uses React Suspense to make streaming straightforward. It supports both in-order streaming, defined by your Suspense boundaries, and out-of-order streaming, which is the default.
Out-of-order streaming renders higher-priority UI parts first while lower-priority parts continue loading, improving perceived performance. Each React component can be treated as a chunk: components that don't depend on data—such as the layout or product information—can be sent first, letting React begin hydration earlier. Lower-priority components like reviews or related products arrive in the same server request once their data is fetched.
Streaming for AI and LLM applications
LLM-powered apps face a particular latency problem: generating long outputs can take 5, 10, or even 40 seconds. A traditional blocking UI would leave users staring at spinners for the entire generation time, which is especially painful in conversational interfaces like chatbots.
Streaming solves this by sending parts of the response to the UI as they are generated. With Next.js and the AI SDK, this behavior is straightforward to enable.
To start building with streaming, the Next.js App Router boilerplate and the Next.js documentation on streaming with React Suspense are good entry points. Partial Prerendering, which builds on streaming, is also worth reviewing.
