Streaming long operations in NextJS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a streaming response in a Next.js server component.

NextJS

export async function GET() {
  const stream = new ReadableStream({
    start(controller) {
      controller.enqueue(new TextEncoder().encode('Hello, '));
      controller.enqueue(new TextEncoder().encode('world!'));
      controller.close();
    }
  });
  return new Response(stream, { headers: { 'Content-Type': [1] } });
}

Drag options to blanks, or click blank then click option'

A'text/plain'

B'text/html'

C'application/json'

D'application/octet-stream'

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'application/json' when the content is plain text.

Forgetting to set the Content-Type header.

The streaming response sends plain text, so the Content-Type should be 'text/plain'.

2fill in blank

medium

Complete the code to create a readable stream that sends chunks with a delay.

NextJS

export async function GET() {
  const stream = new ReadableStream({
    async start(controller) {
      controller.enqueue(new TextEncoder().encode('Loading'));
      await new Promise(resolve => setTimeout(resolve, [1]));
      controller.enqueue(new TextEncoder().encode('...done'));
      controller.close();
    }
  });
  return new Response(stream, { headers: { 'Content-Type': 'text/plain' } });
}

Drag options to blanks, or click blank then click option'

Anull

B'1000'

C1000

Dundefined

Attempts:

3 left

💡 Hint

Common Mistakes

Passing a string instead of a number to setTimeout.

Using null or undefined which causes errors.

The setTimeout delay expects a number in milliseconds, so 1000 means 1 second delay.

3fill in blank

hard

Fix the error in the streaming function by completing the blank.

NextJS

export async function GET() {
  const encoder = new TextEncoder();
  const stream = new ReadableStream({
    start(controller) {
      controller.enqueue(encoder.encode('Start'));
      controller.enqueue(encoder.encode('Middle'));
      controller.[1]();
    }
  });
  return new Response(stream, { headers: { 'Content-Type': 'text/plain' } });
}

Drag options to blanks, or click blank then click option'

Aend

Bclose

Cfinish

Dstop

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'end' or 'finish' which are not valid methods.

Forgetting to close the stream causing it to hang.

The ReadableStream controller uses the 'close' method to signal the end of the stream.

4fill in blank

hard

Fill both blanks to create a streaming response that sends JSON chunks.

NextJS

export async function GET() {
  const stream = new ReadableStream({
    start(controller) {
      controller.enqueue(new TextEncoder().encode(JSON.[1]({ message: 'Hello' })));
      controller.enqueue(new TextEncoder().encode(JSON.[2]({ message: 'World' })));
      controller.close();
    }
  });
  return new Response(stream, { headers: { 'Content-Type': 'application/json' } });
}

Drag options to blanks, or click blank then click option'

Astringify

Bparse

CtoString

Dformat

Attempts:

3 left

💡 Hint

Common Mistakes

Using JSON.parse which causes errors.

Using toString which does not produce JSON.

To send JSON as text, use JSON.stringify to convert objects to strings.

5fill in blank

hard

Fill all three blanks to create a streaming response that sends multiple delayed chunks.

NextJS

export async function GET() {
  const stream = new ReadableStream({
    async start(controller) {
      controller.enqueue(new TextEncoder().encode('Step 1'));
      await new Promise(resolve => setTimeout(resolve, [1]));
      controller.enqueue(new TextEncoder().encode('Step 2'));
      await new Promise(resolve => setTimeout(resolve, [2]));
      controller.enqueue(new TextEncoder().encode('Step 3'));
      controller.[3]();
    }
  });
  return new Response(stream, { headers: { 'Content-Type': 'text/plain' } });
}

Drag options to blanks, or click blank then click option'

A500

B1000

Cclose

Dfinish

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'finish' instead of 'close' to end the stream.

Using strings instead of numbers for delays.

The first delay is 1000ms (option B), the second delay is 1000ms (option B) but since only one B is allowed, the first delay is 500ms (A), second 1000ms (B), and the stream is closed with 'close' (C).