Streaming long operations in NextJS - Step-by-Step Execution

Concept Flow - Streaming long operations

User requests page

↓

Server starts processing

↓

Begin streaming response

↓

Send chunks of data as ready

↓

Client receives and renders chunks

↓

Streaming completes

↓

Full page rendered

The server processes a long task and streams parts of the response to the client as they become ready, allowing the client to render progressively.

Execution Sample

NextJS

export default async function Page() {
  const stream = new ReadableStream({
    async start(controller) {
      controller.enqueue('Loading chunk 1...\n');
      await new Promise(r => setTimeout(r, 1000));
      controller.enqueue('Loading chunk 2...\n');
      controller.close();
    }
  });
  return new Response(stream);
}

This Next.js server component streams two chunks of text with a delay, simulating a long operation streamed to the client.

Execution Table

Step	Action	Stream State	Data Sent	Client Render
1	User requests page	Not started
2	Server starts ReadableStream	Open
3	Enqueue 'Loading chunk 1...\n'	Open	Loading chunk 1...\n	Renders 'Loading chunk 1...'
4	Wait 1 second	Open	Loading chunk 1...\n	Shows first chunk
5	Enqueue 'Loading chunk 2...\n'	Open	Loading chunk 1...\nLoading chunk 2...\n	Renders second chunk appended
6	Close stream	Closed	Loading chunk 1...\nLoading chunk 2...\n	Full content rendered
7	Response complete	Closed	All data sent	Page fully loaded

💡 Stream closes after sending all chunks, ending the response.

Variable Tracker

Variable	Start	After Step 3	After Step 5	Final
stream state	Not started	Open	Open	Closed
data sent	""	"Loading chunk 1...\n"	"Loading chunk 1...\nLoading chunk 2...\n"	"Loading chunk 1...\nLoading chunk 2...\n"
client render	""	"Loading chunk 1...\n"	"Loading chunk 1...\nLoading chunk 2...\n"	"Loading chunk 1...\nLoading chunk 2...\n"

Key Moments - 2 Insights

Why does the client see 'Loading chunk 1...' before the entire operation finishes?

Because the server streams data in chunks (see Step 3 and Step 5 in execution_table), the client renders each chunk as it arrives instead of waiting for all data.

What happens if the stream is not closed after sending chunks?

The client will keep waiting for more data and the page will not finish loading (see Step 6 where closing the stream signals completion).

Visual Quiz - 3 Questions

Look at the execution_table, what is the stream state after Step 5?

A Closed

B Open

C Not started

D Errored

💡 Hint

Check the 'Stream State' column at Step 5 in the execution_table.

At which step does the client first render any content?

A Step 3

B Step 2

C Step 4

D Step 6

💡 Hint

Look at the 'Client Render' column in execution_table to see when content appears.

If the delay between chunks is increased, how does the execution_table change?

A Data sent is reduced

B Stream closes earlier

C Step 4's wait time increases, delaying Step 5 and client render

D Client renders all at once immediately

💡 Hint

Consider the wait in Step 4 and its effect on subsequent steps in execution_table.

Concept Snapshot

Streaming long operations in Next.js:
- Use ReadableStream in server components
- Enqueue data chunks progressively
- Close stream to signal end
- Client renders chunks as they arrive
- Enables faster perceived loading for long tasks

Full Transcript

This visual trace shows how Next.js streams long operations by sending data in chunks from the server to the client. The server creates a ReadableStream and enqueues parts of the response with delays. The client renders each chunk as it arrives, improving user experience by showing progress early. The stream closes when all data is sent, completing the page load.