Streaming with Suspense in NextJS - Mini Project: Build & Apply

Streaming with Suspense in Next.js

📖 Scenario: You are building a simple Next.js app that shows a list of users fetched from an API. To improve user experience, you want to stream the user list as it loads using React Suspense and Next.js streaming features.

🎯 Goal: Create a Next.js app that streams user data using Suspense. You will set up the data fetching, configure a loading fallback, implement the streaming with Suspense, and complete the component to display the user list as it loads.

📋 What You'll Learn

Use a React Server Component to fetch user data

Create a loading fallback component

Use React Suspense to wrap the user list component

Stream the user list rendering as data loads

💡 Why This Matters

🌍 Real World

Streaming data with Suspense improves user experience by showing partial content quickly while the rest loads, common in social media feeds or dashboards.

💼 Career

Understanding Suspense and streaming in Next.js is valuable for frontend developers building fast, user-friendly React applications.

1

DATA SETUP: Create a user data fetching function

Create an async function called fetchUsers that returns a promise resolving to an array of user objects with id and name. Use this exact array: [{ id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }, { id: 3, name: 'Charlie' }].

NextJS

# Your code here
// Create async function fetchUsers returning the exact user array

Need a hint?

Define an async function named fetchUsers that returns the exact array of user objects.

2

CONFIGURATION: Create a loading fallback component

Create a React component called Loading that returns a <p> element with the text Loading users....

NextJS

export async function fetchUsers() {
  return [
    { id: 1, name: 'Alice' },
    { id: 2, name: 'Bob' },
    { id: 3, name: 'Charlie' }
  ];
}

// Your code here
// Create Loading component returning Loading users...

Need a hint?

Create a simple React function component named Loading that returns a paragraph with the text Loading users....

3

CORE LOGIC: Implement the UserList component with streaming

Create an async React Server Component called UserList. Inside it, call fetchUsers() to get users. Return a <ul> with each user's name in a <li> with a key of user.id. Use React.Suspense with the Loading component as fallback to wrap the UserList component in the main export default function called Page.

NextJS

export async function fetchUsers() {
  return [
    { id: 1, name: 'Alice' },
    { id: 2, name: 'Bob' },
    { id: 3, name: 'Charlie' }
  ];
}

export function Loading() {
  return Loading users...;
}

// Your code here
// Create async UserList component fetching users and returning  with  for each user
// Create default export Page component wrapping UserList with React.Suspense and Loading fallback

Need a hint?

Create an async component UserList that fetches users and renders them in a list. Then create a Page component that uses React.Suspense with Loading as fallback to wrap UserList.

4

COMPLETION: Add streaming support with use hook

Modify the UserList component to use the Next.js use hook to read the promise from fetchUsers() for streaming. Import use from react. Replace the await fetchUsers() call with const users = use(fetchUsers()). Keep the rest unchanged.

NextJS

import React, { use } from 'react';

export async function fetchUsers() {
  return [
    { id: 1, name: 'Alice' },
    { id: 2, name: 'Bob' },
    { id: 3, name: 'Charlie' }
  ];
}

export function Loading() {
  return Loading users...;
}

// Your code here
// Modify UserList to use use(fetchUsers()) instead of await fetchUsers()

Need a hint?

Import use from React and replace await fetchUsers() with use(fetchUsers()) inside UserList.