What is streaming rendering?

Next.jsMiddle~1 min read

Streaming rendering is a way of delivering a page to the user in parts, rather than as one chunk, as data becomes ready. The user sees content right away, even if part of the page is still loading.

What streaming rendering is

In Next.js, streaming is based on:

React Server Components
Suspense
streaming the HTML from the server

How it works (step by step)

The server starts rendering the page
Ready parts of the HTML are sent immediately
Slow blocks are replaced with a fallback
When the data is ready, the HTML streams in the rest
The UI updates without a page reload

request
  ↓
[header][sidebar][skeleton]
                 ↓
            [real content]

Example with `Suspense`

tsx

import { Suspense } from "react";

export default function Page() {
  return (
    <>
      <Header />

      <Suspense fallback={<Skeleton />}>
        <SlowBlock />
      </Suspense>
    </>
  );
}

tsx

async function SlowBlock() {
  const data = await fetchSlowData();
  return <Content data={data} />;
}

Header -> arrives immediately
Skeleton -> shown instantly
Content -> loads in later

Why streaming is needed

It improves perceived performance

The user sees something right away, instead of waiting.

It's ideal for heavy pages

AI responses
complex dashboards
several APIs
large DB queries

It pairs great with SSR / ISR

Streaming isn't a separate rendering type it enhances SSR and ISR.

Streaming vs regular SSR

	Regular SSR	Streaming
HTML	one chunk	in parts
First content	waits for everything	appears immediately
Skeleton	manual	native
UX	good	excellent

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.