Streaming long operations in NextJS - Mini Project: Build & Apply

Streaming Long Operations with Next.js

📖 Scenario: You are building a Next.js app that fetches a large list of user comments from a server. Instead of waiting for all comments to load, you want to show them as they arrive, improving user experience.

🎯 Goal: Create a Next.js component that streams comments from a server endpoint and displays them one by one as they arrive, using React Server Components and streaming techniques.

📋 What You'll Learn

Create a server API route that streams comment data in chunks

Create a React Server Component that fetches and renders comments as they stream

Use async iteration to process streamed data

Display each comment as soon as it arrives without waiting for all data

💡 Why This Matters

🌍 Real World

Streaming data is common in chat apps, live feeds, or large data loads where showing partial results quickly improves user experience.

💼 Career

Understanding streaming in Next.js and React Server Components is valuable for building fast, modern web apps that handle large or real-time data efficiently.

1

Create the comments data array

Create a constant array called comments with these exact string entries: 'Great post!', 'Thanks for sharing.', 'Very helpful.', 'Nice explanation.', 'Looking forward to more.'

NextJS

# Your code here

Need a hint?

Use const comments = [ ... ]; to create the array with exact strings.

2

Create the streaming API route

Create an async function called GET that returns a Response streaming the comments array as JSON strings, one comment every 500 milliseconds. Use ReadableStream and setTimeout inside the stream controller to delay each chunk.

NextJS

const comments = ['Great post!', 'Thanks for sharing.', 'Very helpful.', 'Nice explanation.', 'Looking forward to more.'];

// Your code here

Need a hint?

Use ReadableStream with a start(controller) method. Enqueue each comment as JSON string with a delay using setTimeout.

3

Create the React Server Component to stream comments

Create an async React Server Component called CommentsStream that fetches from /api/comments using fetch with cache: 'no-store'. Use for await to read the response body as a stream line by line, parse each JSON chunk, and render each comment inside a <li> element within a <ul>.

NextJS

const comments = ['Great post!', 'Thanks for sharing.', 'Very helpful.', 'Nice explanation.', 'Looking forward to more.'];

export async function GET() {
  const stream = new ReadableStream({
    start(controller) {
      let i = 0;
      function push() {
        if (i >= comments.length) {
          controller.close();
          return;
        }
        const chunk = JSON.stringify({ comment: comments[i] }) + '\n';
        controller.enqueue(new TextEncoder().encode(chunk));
        i++;
        setTimeout(push, 500);
      }
      push();
    }
  });
  return new Response(stream, { headers: { 'Content-Type': 'application/json' } });
}

// Create async React Server Component CommentsStream to fetch and stream comments
// Your code here

Need a hint?

Use an async generator to read the stream line by line. Parse JSON and collect comments. Render them inside a <ul> with <li> for each comment.

4

Enable streaming rendering in the component

Modify the CommentsStream component to render comments as they arrive instead of waiting for all. Use React's use hook to await the async generator and render each comment inside a <li> as soon as it is received.

NextJS

const comments = ['Great post!', 'Thanks for sharing.', 'Very helpful.', 'Nice explanation.', 'Looking forward to more.'];

export async function GET() {
  const stream = new ReadableStream({
    start(controller) {
      let i = 0;
      function push() {
        if (i >= comments.length) {
          controller.close();
          return;
        }
        const chunk = JSON.stringify({ comment: comments[i] }) + '\n';
        controller.enqueue(new TextEncoder().encode(chunk));
        i++;
        setTimeout(push, 500);
      }
      push();
    }
  });
  return new Response(stream, { headers: { 'Content-Type': 'application/json' } });
}

import React from 'react';

async function* streamComments() {
  const res = await fetch('/api/comments', { cache: 'no-store' });
  const reader = res.body?.getReader();
  const decoder = new TextDecoder();
  let buffer = '';

  while (true) {
    const { done, value } = await reader.read();
    if (done) break;
    buffer += decoder.decode(value, { stream: true });
    let lines = buffer.split('\n');
    buffer = lines.pop() || '';
    for (const line of lines) {
      if (line.trim()) {
        yield JSON.parse(line);
      }
    }
  }
  if (buffer.trim()) {
    yield JSON.parse(buffer);
  }
}

// Modify CommentsStream to render comments as they stream using React's use hook
// Your code here

Need a hint?

Use React's use hook to await the async iterable converted to an array. Render comments inside <ul> and <li> elements.