Streaming with Suspense in NextJS - Step-by-Step Execution

Concept Flow - Streaming with Suspense

Start Server Component Render

↓

Begin Streaming HTML to Client

↓

Encounter <Suspense> Boundary

↓

Content Ready

↓

Stream Content

↓

Continue Streaming Remaining Content

↓

Complete Streaming

↓

Client Hydrates with Streamed HTML

The server starts rendering and streams HTML to the client. When it hits a Suspense boundary, it streams fallback content immediately while waiting for the main content. Once ready, it streams the main content, then continues streaming the rest.

Execution Sample

NextJS

import { Suspense } from 'react';

export default function Page() {
  return (
    <Suspense fallback={<p>Loading...</p>}>
      <AsyncComponent />
    </Suspense>
  );
}

This code streams fallback content while waiting for AsyncComponent to load, then streams AsyncComponent content when ready.

Execution Table

Step	Action	Content Streamed	Suspense State	Client View
1	Start rendering Page component	Start HTML shell	No Suspense triggered	Blank page or initial shell
2	Encounter <Suspense> boundary	Stream fallback <p>Loading...</p>	Suspense fallback shown	Loading... message visible
3	AsyncComponent starts loading	Continue streaming fallback	Still loading	Loading... message visible
4	AsyncComponent finishes loading	Stream AsyncComponent content	Suspense resolved	AsyncComponent content replaces fallback
5	Stream remaining page content	Stream rest of HTML	No Suspense	Full page content visible
6	Client hydrates streamed HTML	No new stream	Hydration complete	Page fully interactive

💡 Streaming ends after all content including Suspense boundaries is sent and client hydration completes.

Variable Tracker

Variable	Start	After Step 2	After Step 4	Final
Suspense State	No Suspense	Fallback shown	Resolved	Resolved
Content Streamed	HTML shell	Fallback content	AsyncComponent content	Full page content
Client View	Blank	Loading message	AsyncComponent visible	Fully interactive page

Key Moments - 2 Insights

Why does the client see the fallback content before the AsyncComponent?

Because at Step 2 in the execution_table, the Suspense boundary streams fallback content immediately while waiting for AsyncComponent to load, so the client sees the fallback first.

What happens when AsyncComponent finishes loading during streaming?

At Step 4, the server streams the AsyncComponent content, replacing the fallback in the client view as shown in the execution_table.

Visual Quiz - 3 Questions

Look at the execution_table, what is the Suspense State at Step 3?

A No Suspense triggered

B Fallback shown

C Suspense resolved

D Hydration complete

💡 Hint

Check the Suspense State column at Step 3 in the execution_table.

At which step does the client view change from fallback to AsyncComponent content?

A Step 4

B Step 2

C Step 3

D Step 6

💡 Hint

Look at the Client View column in the execution_table to see when AsyncComponent content appears.

If AsyncComponent took longer to load, which step would be delayed?

A Step 2

B Step 3

C Step 4

D Step 5

💡 Hint

Step 4 streams AsyncComponent content; longer load delays this step.

Concept Snapshot

Streaming with Suspense in Next.js:
- Server streams HTML progressively.
- <Suspense> streams fallback immediately.
- When async content is ready, streams main content.
- Client sees fallback, then real content replaces it.
- Improves perceived load speed and UX.

Full Transcript

Streaming with Suspense in Next.js means the server sends parts of the page as they are ready. When the server hits a Suspense boundary, it sends fallback content first so the user sees something quickly. Meanwhile, the async content loads. Once ready, the server streams the real content to replace the fallback. This process continues until the full page is sent. Finally, the client hydrates the streamed HTML to make the page interactive. This approach helps pages feel faster and smoother for users.

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