Streaming long operations in NextJS - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What does this Next.js streaming component render first?

Consider this Next.js Server Component that streams a long operation result:

export default async function StreamExample() {
  const stream = new ReadableStream({
    start(controller) {
      controller.enqueue(new TextEncoder().encode('Loading...\n'));
      setTimeout(() => {
        controller.enqueue(new TextEncoder().encode('Data chunk 1\n'));
        controller.close();
      }, 1000);
    }
  });

  const response = new Response(stream);
  const body = response.body;

  return (
    <pre>{body ? 'Streaming started' : 'No stream'}</pre>
  );
}

What will the user see immediately when this component renders?

NextJS

export default async function StreamExample() {
  const stream = new ReadableStream({
    start(controller) {
      controller.enqueue(new TextEncoder().encode('Loading...\n'));
      setTimeout(() => {
        controller.enqueue(new TextEncoder().encode('Data chunk 1\n'));
        controller.close();
      }, 1000);
    }
  });

  const response = new Response(stream);
  const body = response.body;

  return (
    <pre>{body ? 'Streaming started' : 'No stream'}</pre>
  );
}

A The text 'Loading...' appears immediately, then 'Data chunk 1' after 1 second

B The text 'Streaming started' appears immediately, then updates after 1 second

C Nothing appears until the stream closes after 1 second

D The text 'No stream' appears because body is undefined

💡 Hint

Check what the variable body contains and how JSX renders it.

The body is a ReadableStream object, which is truthy, so the ternary renders 'Streaming started' immediately. The actual streamed text is not rendered here because the component does not consume the stream to display chunks.

📝 Syntax

intermediate

Which Next.js streaming code snippet correctly streams JSON chunks?

Which code snippet correctly streams JSON chunks from a Next.js Server Component?

A const stream = new ReadableStream({start(controller) {controller.enqueue(new TextEncoder().encode(JSON.stringify({part:1})));controller.close();}});

B const stream = new ReadableStream({start(controller) {controller.enqueue(Buffer.from(JSON.stringify({part:1})));controller.close();}});

C const stream = new ReadableStream({start(controller) {controller.enqueue(JSON.stringify({part:1}));controller.close();}});

D const stream = new ReadableStream({start(controller) {controller.enqueue(JSON.stringify({part:1}).buffer);controller.close();}});

💡 Hint

ReadableStream expects Uint8Array chunks, not strings or buffers.

ReadableStream's enqueue method requires a Uint8Array or similar binary chunk. Using new TextEncoder().encode() converts the JSON string to Uint8Array correctly.

🔧 Debug

advanced

Why does this Next.js streaming component cause a runtime error?

Review this Next.js Server Component code:

export default async function StreamError() {
  const stream = new ReadableStream({
    start(controller) {
      controller.enqueue('Hello');
      controller.close();
    }
  });

  const response = new Response(stream);
  const text = await response.text();

  return <pre>{text}</pre>;
}

Why does this code cause a runtime error?

NextJS

export default async function StreamError() {
  const stream = new ReadableStream({
    start(controller) {
      controller.enqueue('Hello');
      controller.close();
    }
  });

  const response = new Response(stream);
  const text = await response.text();

  return <pre>{text}</pre>;
}

A controller.enqueue expects a Uint8Array, but a string was passed causing a TypeError

B await response.text() is invalid because Response has no text() method

C The component cannot return JSX from an async function

D ReadableStream cannot be used inside Next.js Server Components

💡 Hint

Check the type of argument passed to controller.enqueue.

controller.enqueue requires a Uint8Array or similar binary chunk. Passing a string directly causes a TypeError at runtime.

❓ state_output

advanced

What is the output of this Next.js streaming component with delayed chunks?

Given this Next.js Server Component:

export default async function DelayedStream() {
  const stream = new ReadableStream({
    async start(controller) {
      controller.enqueue(new TextEncoder().encode('Start\n'));
      await new Promise(r => setTimeout(r, 500));
      controller.enqueue(new TextEncoder().encode('Middle\n'));
      await new Promise(r => setTimeout(r, 500));
      controller.enqueue(new TextEncoder().encode('End\n'));
      controller.close();
    }
  });

  const response = new Response(stream);
  const text = await response.text();

  return <pre>{text}</pre>;
}

What will the user see when this component renders?

NextJS

export default async function DelayedStream() {
  const stream = new ReadableStream({
    async start(controller) {
      controller.enqueue(new TextEncoder().encode('Start\n'));
      await new Promise(r => setTimeout(r, 500));
      controller.enqueue(new TextEncoder().encode('Middle\n'));
      await new Promise(r => setTimeout(r, 500));
      controller.enqueue(new TextEncoder().encode('End\n'));
      controller.close();
    }
  });

  const response = new Response(stream);
  const text = await response.text();

  return <pre>{text}</pre>;
}

A The component throws an error because async start is not allowed

B The text 'Start' appears immediately, then 'Middle' after 0.5s, then 'End' after 1s

C Nothing appears until the stream closes, then 'Start\nMiddle\nEnd\n' appears

D The text 'Start\nMiddle\nEnd\n' appears all at once after about 1 second

💡 Hint

Consider how await response.text() works with streams.

The await response.text() waits for the entire stream to finish before returning the full text. So the user sees all text at once after about 1 second.

🧠 Conceptual

expert

Which Next.js streaming approach enables progressive HTML rendering in the browser?

In Next.js 14+, which streaming approach allows the browser to progressively render HTML chunks as they arrive from the server?

A Using client-side <code>useEffect</code> to fetch data and update state after full load

B Returning a plain string from a Server Component after awaiting all data

C Using <code>fetch</code> with <code>ReadableStream</code> and returning a <code>Response</code> with <code>body</code> from a Server Component

D Returning a JSON object from a Server Component and parsing it on the client

💡 Hint

Think about how streaming HTML works in Next.js Server Components.

Returning a Response with a ReadableStream body from a Server Component enables Next.js to stream HTML chunks progressively to the browser, improving perceived load time.

Practice

1. What is the main benefit of using streaming in Next.js for long operations?

easy

A. Users see data progressively, reducing perceived wait time.

B. It automatically caches all data on the server.

C. It compresses data to reduce bandwidth usage.

D. It prevents any errors during data fetching.

Solution

1. Step 1: Understand streaming purpose

   Streaming sends data in chunks so users can see progress during long operations.

2. Step 2: Identify user experience impact

   This reduces the perceived wait time by showing partial results early.

3. Final Answer:

   Users see data progressively, reducing perceived wait time. -> Option A

4. Quick Check:

   Streaming improves user experience = A [OK]

Hint: Streaming shows partial data early to users [OK]

Common Mistakes:

• Thinking streaming caches data automatically
• Confusing streaming with data compression
• Assuming streaming prevents all errors

2. Which syntax correctly creates a streaming response in a Next.js API route?

easy

A. const stream = new ReadableStream({ start(controller) { controller.enqueue('data'); controller.close(); } }); return new Response(stream);

B. const stream = new StreamReader(); stream.push('data'); return stream;

C. const stream = new WritableStream(); stream.write('data'); return stream;

D. const stream = new ReadableStream(); stream.send('data'); return stream;

Solution

1. Step 1: Recall correct ReadableStream usage

   ReadableStream requires a start method with a controller to enqueue data and close the stream.

2. Step 2: Match syntax with Next.js streaming pattern

   const stream = new ReadableStream({ start(controller) { controller.enqueue('data'); controller.close(); } }); return new Response(stream); uses controller.enqueue and controller.close correctly and returns a Response wrapping the stream.

3. Final Answer:

   const stream = new ReadableStream({ start(controller) { controller.enqueue('data'); controller.close(); } }); return new Response(stream); -> Option A

4. Quick Check:

   ReadableStream with controller.enqueue = B [OK]

Hint: Use ReadableStream with start(controller) and enqueue [OK]

Common Mistakes:

• Using WritableStream instead of ReadableStream
• Calling non-existent methods like send() or push()
• Not closing the stream after enqueue

3. Given this Next.js API route code, what will the client receive?

export async function GET() {
  const stream = new ReadableStream({
    async start(controller) {
      controller.enqueue(new TextEncoder().encode('Hello '));
      await new Promise(r => setTimeout(r, 1000));
      controller.enqueue(new TextEncoder().encode('World!'));
      controller.close();
    }
  });
  return new Response(stream);
}

medium

A. Only "Hello " is received; stream never closes.

B. "Hello World!" received in two chunks with 1 second delay between.

C. "Hello World!" received all at once after 1 second delay.

D. Syntax error due to missing await in controller.enqueue.

Solution

1. Step 1: Analyze streaming behavior

   The stream first sends "Hello " immediately, then waits 1 second before sending "World!".

2. Step 2: Understand client reception

   The client receives data in two chunks with a delay, then the stream closes properly.

3. Final Answer:

   "Hello World!" received in two chunks with 1 second delay between. -> Option B

4. Quick Check:

   Streaming sends chunks with delay = C [OK]

Hint: Streaming sends chunks as they enqueue, not all at once [OK]

Common Mistakes:

• Assuming all data arrives after delay
• Thinking stream never closes
• Confusing async enqueue with syntax error

4. What is wrong with this Next.js streaming code snippet?

export async function GET() {
  const stream = new ReadableStream({
    start(controller) {
      controller.enqueue('Data chunk');
      // Missing controller.close()
    }
  });
  return new Response(stream);
}

medium

A. ReadableStream cannot be used in Next.js API routes.

B. controller.enqueue must be async function.

C. The stream never closes, causing the client to wait indefinitely.

D. Response must be wrapped in JSON.stringify.

Solution

1. Step 1: Check stream lifecycle

   The code enqueues data but does not call controller.close(), so the stream stays open.

2. Step 2: Understand client impact

   The client waits forever for the stream to end, causing a hang or timeout.

3. Final Answer:

   The stream never closes, causing the client to wait indefinitely. -> Option C

4. Quick Check:

   Missing controller.close() = stream hangs [OK]

Hint: Always call controller.close() after enqueueing all data [OK]

Common Mistakes:

• Forgetting to close the stream
• Thinking enqueue must be async
• Misunderstanding Response usage

5. You want to stream a large list of items from a Next.js API route, sending each item as JSON chunk. Which approach correctly streams the data without blocking the client?

hard

A. Send each item with separate fetch requests instead of streaming.

B. Convert entire list to JSON string, enqueue once, then close the stream.

C. Use WritableStream to write each JSON chunk and return it directly.

D. Use ReadableStream with async start(controller), loop over items, enqueue JSON strings, and close after all.

Solution

1. Step 1: Understand streaming large data

   Streaming each item as JSON chunk progressively sends data without waiting for all items.

2. Step 2: Identify correct streaming pattern

   Using ReadableStream with async start allows looping over items, enqueueing each chunk, then closing the stream.

3. Step 3: Evaluate other options

   A requires multiple requests (inefficient); B sends all data at once (no streaming benefit); C uses wrong WritableStream type.

4. Final Answer:

   Use ReadableStream with async start(controller), loop over items, enqueue JSON strings, and close after all. -> Option D

5. Quick Check:

   Stream chunks in loop with ReadableStream = D [OK]

Hint: Stream each item chunk inside async start, then close stream [OK]

Common Mistakes:

• Sending all data at once, losing streaming benefit
• Using WritableStream instead of ReadableStream
• Making multiple fetch calls instead of streaming