Engineering

Wednesday, January 31st 2024

How streaming helps build faster web applications

Learn how the Next.js App Router helps you take advantage of streaming UI.

Posted by

Lee Robinson

VP of Product

Streaming is the key to fast and dynamic web applications.

When streaming, you can progressively send UI from server to client, without needing to wait until all of your data has been loaded. This helps your customers see content immediately, like your main call to action to add an item to the cart.

The largest companies and storefronts in the world use streaming for optimal performance.

Let's learn how streaming helps build fast web applications and a great product experience.

How streaming helps improve performance

The largest sites on the web, like Amazon and Google, utilize streaming to improve both performance (defined by Core Web Vitals) and conversion rates.

Streaming can prevent slow data sources from blocking the display of initial UI to your customers, with the added benefit of parallelizing work for loading other critical assets like JavaScript, stylesheets, and fonts.

Colocating compute next to your data origin

As your application grows, so does network traffic between your clients (possibly in distant regions) and your database (likely in one region). We can’t beat the speed of light, so we need compute to run close to our data. That’s usually one region, maybe 2-3, depending on your data sovereignty and security requirements.

For example, your Vercel Function can stream responses from us-east close to your data, and prevent many network roundtrips from origin and edge region.

To further optimize your Time To First Byte (TTFB), Next.js is building Partial Prerendering to generate a static shell of your route ahead of time and deploy it to every edge region. Partial Prerendering enables consistent, fast initial loading, paired with being able to stream dynamic data from your Vercel Functions at the same time.

Using streaming with the Next.js App Router

The Next.js App Router, with React Suspense, makes it easy to stream UI components. Next.js supports both out-of-order streaming (default) and in-order streaming defined by your Suspense boundaries.

Unlike conventional streaming that follows a sequential order, out-of-order streaming enhances user experience by rendering parts of a UI, while continuing to load other elements, reducing the perceived load time.

app/page.tsx

export default function Page() {
  return (
    <section>
      <Suspense fallback={<PriceSkeleton />}>
        <Price />
      </Suspense>
      <Suspense fallback={<Reviews />}>
        <Reviews />
      </Suspense>
    </section>
  )
}

Stream the price and reviews out of order using Suspense and Next.js.

app/page.tsx

export default function Page() {
  return (
    <section>
      <Hero />
      <Suspense>
        <Body />
        <Suspense>
          <Footer />
        </Suspense>
      </Suspense>
    </section>
  )
}

Stream and reveal sections of the page in order defined by Suspense boundaries.

Streaming pairs with the React component model. Each component can be considered a chunk. Components that have higher priority (e.g. product information) or that don't rely on data can be sent first (e.g. layout), and React can start hydration earlier. Components that have lower priority (e.g. reviews, related products) can be sent in the same server request after their data has been fetched.

Using Partial Prerendering with Next.js to stream content out of order.

Learn more about streaming and React Suspense in Next.js. Optionally, learn more about a new technique that takes advantage of streaming called Partial Prerendering.

Using streaming with AI applications and LLMs

The next generation of web apps built on AI are also using streaming.

Large Language Models (LLMs) are extremely powerful. However, when generating long outputs, they can be very slow compared to the latency you're likely used to. If you try to build a traditional blocking UI, your users might easily find themselves staring at loading spinners for 5, 10, even up to 40s waiting for the entire LLM response to be generated. This can lead to a poor user experience, especially in conversational applications like chatbots.

Streaming UIs can help mitigate this issue by displaying parts of the response as they become available. This is easily enabled through the combination of Next.js and the AI SDK.

Start streaming

Want to build your next product with the power of streaming? Get started with the Next.js App Router and learn more about streaming in Next.js.

Explore more

Developer Experience Platform

Read the follow-up

An Introduction to Streaming on the Web

1 author

Jun. 22nd, 2023

Vercel

Open Source

Scale

Use Case

Tools

Company