Next.js Course
Next.js
/
Advanced

Streaming

Definition

A rendering technique that allows the server to break the HTML down into smaller chunks and progressively send them to the client as they are ready, rather than waiting for the entire page to finish building.

Explain Like I'm New

Imagine a dashboard with a fast Navbar and a very slow Analytics Graph. In standard SSR, the user stares at a white screen for 5 seconds waiting for the graph to calculate. With Streaming, the server instantly sends the Navbar and a 'Loading Spinner' for the graph. 5 seconds later, the graph data streams in and replaces the spinner.

Real World Example

Using Next.js `loading.tsx` file or React `<Suspense>` boundaries to instantly show the shell of an application while heavy database queries run in the background.

Common Use Cases

  • •Complex dashboards
  • •Slow API responses
  • •Improving First Contentful Paint (FCP)

Interactive Example

import { Suspense } from 'react';
import { SlowAnalyticsGraph, FastSidebar } from './components';

export default function Dashboard() {
  return (
    <div className="flex">
      {/* This renders instantly */}
      <FastSidebar />
      
      <main>
        <h1>Dashboard</h1>
        {/* 
          STREAMING MAGIC! 
          The server sends the <h1> and the <p>Loading...</p> instantly.
          It keeps the connection open, and streams the <SlowAnalyticsGraph> 
          HTML down the pipe whenever it finishes calculating!
        */}
        <Suspense fallback={<p>Loading heavy graph...</p>}>
          <SlowAnalyticsGraph />
        </Suspense>
      </main>
    </div>
  );
}

Interview Questions

basic

  • What special Next.js file is used to automatically create a streaming loading state for an entire route?

intermediate

  • What React component is the foundation of Streaming in Next.js?

Flash Cards

Question

Special file?

Click to reveal answer
Answer

`loading.tsx`. If placed next to a `page.tsx`, Next.js will instantly stream the loading UI while the page is generating.

Question

Which React component?

Click to reveal answer
Answer

`<Suspense>`. Next.js uses React Suspense under the hood to handle streaming boundaries.