Suggest an edit

Improve this article

Refine the answer for “What is streaming rendering?”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

**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)

1. The server starts rendering the page
2. **Ready parts of the HTML are sent immediately**
3. Slow blocks are replaced with a `fallback`
4. When the data is ready, the HTML **streams in the rest**
5. 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 |

Markdown · drag & drop images · ⌘B / ⌘I shortcuts292 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.