Next.js Course
Next.js
/
Advanced

Streaming UI

Definition

The ability to stream React component HTML chunks from the server to the browser progressively, rather than waiting for the entire page's data requirements to resolve.

Explain Like I'm New

Instead of waiting for the slowest part of a page to load before showing anything, Streaming sends the fast parts instantly (Navbar, Text), and sends the slow parts (Database Charts) seconds later, popping them onto the screen when they are ready.

Real World Example

An AI Chatbot (like ChatGPT). It doesn't wait to generate the entire 500-word paragraph before showing it to you. It 'streams' the text down the wire word-by-word, updating the UI in real-time.

Common Use Cases

  • •AI interfaces
  • •Slow data fetching
  • •Improving Perceived Performance

Interactive Example

import { Suspense } from 'react';

// A component that takes 5 seconds to fetch data
async function SlowProductReviews() {
  const res = await fetch('...', { cache: 'no-store' });
  return <div>Reviews loaded!</div>;
}

export default function Page() {
  return (
    <div>
      {/* âš¡ This renders INSTANTLY */}
      <h1>Product Page</h1>
      
      {/* 
        The server keeps the HTTP connection open. 
        It instantly sends the fallback `<p>Loading...</p>` to the browser.
        5 seconds later, it streams the completed `<SlowProductReviews />` 
        HTML chunk to the browser, replacing the fallback!
      */}
      <Suspense fallback={<p>Loading reviews...</p>}>
        <SlowProductReviews />
      </Suspense>
    </div>
  );
}

Interview Questions

basic

  • What native web protocol does Next.js use under the hood to achieve streaming without websockets?

intermediate

  • How does Streaming fundamentally change the Time To First Byte (TTFB) metric?

Flash Cards

Question

Which protocol?

Click to reveal answer
Answer

HTTP Transfer-Encoding: chunked. It keeps a standard HTTP request open and continuously pushes chunks of HTML down the pipe.

Question

TTFB change?

Click to reveal answer
Answer

Without streaming, TTFB is delayed by the slowest database query on the page. With streaming, TTFB is practically instant, because the server immediately responds with the static HTML shell while the database queries run in the background.