Streaming and partial rendering in NextJS - Mini Project: Build & Apply

Streaming and Partial Rendering with Next.js

📖 Scenario: You are building a simple Next.js app that shows a list of user comments. The comments come from a slow API. To improve user experience, you want to show the page header immediately and then stream the comments as they load one by one.

🎯 Goal: Create a Next.js app using the App Router that streams comments to the user as they load, showing the page header first and then rendering each comment as it arrives.

📋 What You'll Learn

Create a server component that fetches comments one by one with delay

Use React's async component and for await loop to stream comments

Render a page header immediately before comments load

Use Next.js 14+ App Router conventions with server components

💡 Why This Matters

🌍 Real World

Streaming and partial rendering improves user experience by showing content as soon as possible instead of waiting for all data to load.

💼 Career

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

1

Set up the comments data array

Create a constant called comments as an array with these exact strings: 'Great post!', 'Thanks for sharing.', 'Very helpful.'

NextJS

# Create the comments array with the exact strings
# Your code here

Need a hint?

Use const comments = ['Great post!', 'Thanks for sharing.', 'Very helpful.']

2

Create a delay helper function

Add an async function called delay that takes ms and returns a Promise that resolves after ms milliseconds.

NextJS

const comments = ['Great post!', 'Thanks for sharing.', 'Very helpful.']

// Create delay function here
# Your code here

Need a hint?

Use return new Promise(resolve => setTimeout(resolve, ms)) inside the async delay function.

3

Create an async generator to yield comments with delay

Write an async generator function called fetchComments that loops over comments and for each comment calls await delay(1000) then yield the comment.

NextJS

const comments = ['Great post!', 'Thanks for sharing.', 'Very helpful.']

async function delay(ms) {
  return new Promise(resolve => setTimeout(resolve, ms))
}

// Create async generator fetchComments here
# Your code here

Need a hint?

Use for (const comment of comments) and yield comment after await delay(1000).

4

Create the streaming React server component page

Create a default async React server component called Page that renders a <h1> with text 'User Comments' and then uses for await (const comment of fetchComments()) to render each comment inside a <p> tag.

NextJS

const comments = ['Great post!', 'Thanks for sharing.', 'Very helpful.']

async function delay(ms) {
  return new Promise(resolve => setTimeout(resolve, ms))
}

export async function* fetchComments() {
  for (const comment of comments) {
    await delay(1000)
    yield comment
  }
}

// Create default async function Page component here
# Your code here

Need a hint?

Use an async IIFE inside JSX to for await over fetchComments() and render each comment inside a <p> tag.