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.