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

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...

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

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()

Hint

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

Practice

1. What is the main purpose of using Suspense in Next.js streaming?

easy

A. To show a fallback UI while waiting for slow components to load

B. To prevent any component from rendering

C. To disable server-side rendering

D. To cache all components on the client

Solution

1. Step 1: Understand Suspense role

   Suspense is used to wrap components that may take time to load, showing a fallback UI meanwhile.

2. Step 2: Identify the purpose in streaming

   In streaming, it helps parts of the page appear quickly by showing placeholders until content is ready.

3. Final Answer:

   To show a fallback UI while waiting for slow components to load -> Option A

4. Quick Check:

   Suspense fallback = show UI while loading [OK]

Hint: Suspense shows fallback UI during loading [OK]

Common Mistakes:

• Thinking Suspense stops rendering completely
• Confusing Suspense with caching
• Assuming Suspense disables server rendering

2. Which of the following is the correct way to use Suspense in a Next.js component?

easy

A. <Suspense><MyComponent fallback="Loading..." /></Suspense>

B. <Suspense fallback="<Loading />"><MyComponent />

C. <Suspense fallback="Loading..."><MyComponent /></Suspense>

D. <Suspense fallback="<Loading />"><MyComponent /></Suspense>

Solution

1. Step 1: Check Suspense syntax

   The Suspense component requires a fallback prop with a React node, and must wrap the child component properly.

2. Step 2: Identify correct JSX structure

   <Suspense fallback="Loading..."><MyComponent /></Suspense> correctly uses fallback="Loading..." and properly closes the Suspense tag.

3. Final Answer:

   <Suspense fallback="Loading..."><MyComponent /></Suspense> -> Option C

4. Quick Check:

   Suspense fallback prop + proper closing = correct syntax [OK]

Hint: Suspense needs fallback prop and closing tag [OK]

Common Mistakes:

• Forgetting to close Suspense tag
• Passing fallback inside child component
• Using fallback as string with JSX tags

3. Given this Next.js component using streaming with Suspense:

import { Suspense } from 'react';

function SlowComponent() {
  return 
Data loaded
;
}

export default function Page() {
  return (
    

      Loading...
}>
        
      
    
  );
}

What will the user see first when this page loads?

medium

A. An error because Suspense cannot be used here

B. The text 'Loading...' immediately, then 'Data loaded' after SlowComponent finishes

C. A blank page until SlowComponent loads

D. Only 'Data loaded' without any loading text

Solution

1. Step 1: Check if SlowComponent suspends

   SlowComponent is synchronous and returns <div>Data loaded</div> immediately without throwing a promise, so Suspense does not trigger fallback.

2. Step 2: Determine initial render behavior

   The entire page renders instantly with 'Data loaded' inside the div. No fallback appears because there is no suspension.

3. Final Answer:

   Only 'Data loaded' without any loading text -> Option D

4. Quick Check:

   No suspend = no fallback, direct content render [OK]

Hint: Suspense fallback only if children suspend (throw promise) [OK]

Common Mistakes:

• Assuming Suspense always shows fallback
• Thinking synchronous components trigger loading
• Expecting streaming without suspend mechanism

4. Identify the error in this Next.js streaming code snippet:

import { Suspense } from 'react';

export default function Page() {
  return (
    <div>
      <Suspense fallback="Loading...">
        <SlowComponent />
      </Suspense>
    </div>
  );
}

function SlowComponent() {
  throw new Promise(resolve => setTimeout(resolve, 1000));
  return <div>Loaded</div>;
}

medium

A. The return statement after throw is unreachable

B. SlowComponent cannot throw a Promise

C. The fallback prop should be a React node, not a string

D. Suspense must be imported from 'next/suspense' not 'react'

Solution

1. Step 1: Spot unreachable code

   The return <div>Loaded</div> after throw is unreachable because the throw executes first.

2. Step 2: Validate other parts

   Import from 'react' is correct; throwing a Promise suspends correctly (though recreating it causes infinite loop here); fallback string is valid ReactNode.

3. Final Answer:

   The return statement after throw is unreachable -> Option A

4. Quick Check:

   throw before return = unreachable [OK]

Hint: Code after throw is unreachable [OK]

Common Mistakes:

• Thinking fallback string causes issues
• Believing components cannot throw Promises
• Wrong import source for Suspense

5. You want to stream two slow components in Next.js with Suspense, showing their fallbacks independently. Which approach correctly achieves this?

hard

A. <Suspense fallback="Loading..."><ComponentA /></Suspense><ComponentB fallback="Loading B..." />

B. <Suspense fallback="Loading A..."><ComponentA /></Suspense><Suspense fallback="Loading B..."><ComponentB /></Suspense>

C. <ComponentA /><ComponentB /> without Suspense

D. <Suspense fallback="Loading A and B..."><ComponentA /><ComponentB /></Suspense>

Solution

1. Step 1: Understand independent Suspense boundaries

   Wrapping each slow component in its own Suspense allows each to show its own fallback independently.

2. Step 2: Analyze options

   <Suspense fallback="Loading A..."><ComponentA /></Suspense><Suspense fallback="Loading B..."><ComponentB /></Suspense> wraps each component separately with distinct fallbacks, enabling independent streaming. <Suspense fallback="Loading A and B..."><ComponentA /><ComponentB /></Suspense> shares one fallback for both, so they load together. <ComponentA /><ComponentB /> without Suspense has no fallback. <Suspense fallback="Loading..."><ComponentA /></Suspense><ComponentB fallback="Loading B..." /> incorrectly uses fallback on a component.

3. Final Answer:

   <Suspense fallback="Loading A..."><ComponentA /></Suspense><Suspense fallback="Loading B..."><ComponentB /></Suspense> -> Option B

4. Quick Check:

   Separate Suspense per component = independent fallbacks [OK]

Hint: Wrap each slow component in its own Suspense [OK]

Common Mistakes:

• Using one Suspense for multiple components expecting separate fallbacks
• Not wrapping slow components in Suspense
• Passing fallback prop to child components