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.