Streaming and partial rendering in NextJS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to enable streaming in a Next.js Server Component.

NextJS

import { Suspense } from 'react';

export default function Page() {
  return (
    <[1] fallback={<div>Loading...</div>}> 
      <div>Hello, streaming!</div>
    </[1]>
  );
}

Drag options to blanks, or click blank then click option'

ASuspense

Bmain

Cdiv

DFragment

Attempts:

3 left

💡 Hint

Common Mistakes

Using Fragment (<>) doesn't create a suspense boundary.

HTML elements like div or main don't handle streaming.

Wrapping content in <Suspense fallback={...}> enables streaming in Next.js Server Components, allowing the fallback to render first.

2fill in blank

medium

Complete the code to use React's Suspense for partial rendering in Next.js.

NextJS

import { Suspense } from 'react';

export default function Page() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <[1] />
    </Suspense>
  );
}

Drag options to blanks, or click blank then click option'

AServerComponent

BClientComponent

CLoadingComponent

DErrorComponent

Attempts:

3 left

💡 Hint

Common Mistakes

Using a client component inside Suspense for streaming causes errors.

Fallback should be a loading UI, not an error.

Server components can be streamed and wrapped in Suspense for partial rendering.

3fill in blank

hard

Fix the error in the code to enable streaming with async Server Components.

NextJS

export default async function Page() {
  const data = [1]fetchData();
  return <div>{data.message}</div>;
}

Drag options to blanks, or click blank then click option'

Aasync

Bawait

CuseEffect

DSuspense

Attempts:

3 left

💡 Hint

Common Mistakes

Trying to use data.message without awaiting fetchData causes errors.

Using useEffect in server components is invalid.

Await is needed to resolve the promise before rendering the message.

4fill in blank

hard

Fill both blanks to create a streaming layout with a loading fallback.

NextJS

import { Suspense } from 'react';

export default function Layout({ children }) {
  return (
    <div>
      <Suspense fallback={<[1]>Loading...</[2]>}> 
        {children}
      </Suspense>
    </div>
  );
}

Drag options to blanks, or click blank then click option'

Amain

Bsection

Cdiv

Dspan

Attempts:

3 left

💡 Hint

Common Mistakes

Using non-semantic elements like <span> for block content.

Mismatched opening and closing tags cause errors.

Using <main> for the fallback is semantic and accessible.

5fill in blank

hard

Fill all three blanks to implement streaming with a suspense boundary and async data fetch.

NextJS

import { Suspense } from 'react';

async function fetchUser() {
  const res = await fetch('/api/user');
  return res.json();
}

async function UserContent() {
  const user = await fetchUser();
  return (
    <h1>Hello, [3]</h1>
  );
}

export default function Page() {
  return (
    <Suspense fallback={<[1]>Loading user...</[2]>}> 
      <UserContent />
    </Suspense>
  );
}

Drag options to blanks, or click blank then click option'

Asection

Bdiv

Cuser.name

Duser.username

Attempts:

3 left

💡 Hint

Common Mistakes

Using mismatched tags in fallback causes errors.

Trying to display user.username when data has user.name.

Use a <div> for fallback, and display user.name from fetched data.

Practice

1. What is the main benefit of streaming in Next.js when rendering pages?

easy

A. It caches the whole page on the client side before showing anything.

B. It delays sending the entire page until all data is loaded.

C. It disables server-side rendering completely.

D. It sends parts of the page to the browser as soon as they are ready.

Solution

1. Step 1: Understand streaming concept in Next.js

   Streaming means sending parts of the page to the browser immediately when they are ready, not waiting for the whole page.

2. Step 2: Compare options with streaming behavior

   It sends parts of the page to the browser as soon as they are ready. matches this behavior exactly, while others describe delaying or caching, which are not streaming.

3. Final Answer:

   It sends parts of the page to the browser as soon as they are ready. -> Option D

4. Quick Check:

   Streaming = send parts early [OK]

Hint: Streaming means show parts early, not wait for all [OK]

Common Mistakes:

• Thinking streaming waits for full page
• Confusing streaming with client caching
• Assuming streaming disables server rendering

2. Which of the following is the correct way to use Suspense for partial rendering in Next.js?

easy

A. } />

B. } />

C. }>

D. }>

Solution

1. Step 1: Recall Suspense usage pattern

   Suspense wraps the async component and uses the fallback prop to show a loading state while waiting.

2. Step 2: Match correct syntax

   <Suspense fallback=<Loading />><AsyncComponent /></Suspense> correctly wraps AsyncComponent inside Suspense with fallback. Others misuse fallback or component placement.

3. Final Answer:

   <Suspense fallback=<Loading />><AsyncComponent /></Suspense> -> Option C

4. Quick Check:

   Suspense wraps async with fallback [OK]

Hint: Suspense wraps async component with fallback prop [OK]

Common Mistakes:

• Placing fallback inside async component
• Not wrapping async component with Suspense
• Using fallback incorrectly as a child

3. Given this Next.js server component code using streaming:

export default async function Page() {
  const user = await fetchUser();
  return (
    <>
      
Welcome {user.name}
      Loading posts...
}>
        
      
    </>
  );
}

What will the user see first in the browser?

medium

A. Only 'Loading posts...' until all data loads.

B. The heading with user name, then 'Loading posts...' while posts load.

C. The full page with heading and posts at once.

D. An empty page until fetchUser finishes.

Solution

1. Step 1: Analyze async data fetching and rendering

   The user data is awaited before rendering, so the heading with user name shows immediately.

2. Step 2: Understand Suspense fallback behavior

   The Posts component is wrapped in Suspense with a fallback, so 'Loading posts...' shows while posts load.

3. Final Answer:

   The heading with user name, then 'Loading posts...' while posts load. -> Option B

4. Quick Check:

   Await user shows heading first, Suspense fallback next [OK]

Hint: Awaited data shows first; Suspense fallback shows during async child load [OK]

Common Mistakes:

• Thinking Suspense fallback shows before awaited user data
• Assuming full page waits for all data
• Ignoring Suspense fallback usage

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

export default async function Page() {
  return (
    Loading...
}>
      
    
  );
}

function AsyncData() {
  const data = fetchData();
  return <p>{data.message}</p>;
}

medium

A. AsyncData is not marked async and fetchData is not awaited.

B. Suspense cannot wrap components in Next.js.

C. fetchData should be called inside Page, not AsyncData.

D. The fallback prop must be a string, not JSX.

Solution

1. Step 1: Check AsyncData function for async usage

   AsyncData calls fetchData() but does not await it or mark function async, causing a promise to be rendered.

2. Step 2: Confirm Suspense usage and fallback validity

   Suspense usage is correct, and fallback can be JSX, so no error there.

3. Final Answer:

   AsyncData is not marked async and fetchData is not awaited. -> Option A

4. Quick Check:

   Async function must await async calls [OK]

Hint: Async components must await async calls inside [OK]

Common Mistakes:

• Not marking component async when using await
• Rendering unresolved promises
• Misunderstanding Suspense fallback types

5. You want to stream a page showing user info and their posts. User info loads fast, posts load slowly. How do you combine streaming and partial rendering to show user info immediately and posts with a loading fallback?

hard

A. Make Page async, await user data, render user info immediately, wrap Posts in Suspense with fallback.

B. Render user info and posts inside one Suspense with fallback for both.

C. Fetch posts first, then user info, and render all at once without Suspense.

D. Use client-side fetching for posts and server-side for user info without Suspense.

Solution

1. Step 1: Await fast user data in Page component

   Mark Page async and await user data so user info renders immediately.

2. Step 2: Wrap slow posts component in Suspense with fallback

   Wrap Posts in Suspense with a loading fallback to show partial rendering while posts load.

3. Final Answer:

   Make Page async, await user data, render user info immediately, wrap Posts in Suspense with fallback. -> Option A

4. Quick Check:

   Await fast data, Suspense slow data [OK]

Hint: Await fast data, Suspense slow parts with fallback [OK]

Common Mistakes:

• Wrapping all content in one Suspense losing immediate render
• Not awaiting fast data before rendering
• Using client fetching without Suspense for server components