Streaming with Suspense in NextJS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the Suspense component from React.

NextJS

import { [1] } from 'react';

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

AFragment

BuseState

CSuspense

DuseEffect

Attempts:

3 left

💡 Hint

Common Mistakes

Importing useState instead of Suspense

Forgetting to import Suspense

Using Fragment which does not support fallback

The Suspense component is imported from React to enable streaming UI with fallback content.

2fill in blank

medium

Complete the code to wrap the component with Suspense and provide a fallback UI.

NextJS

<Suspense fallback=[1]>
  <Profile />
</Suspense>

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

Anull

B<ErrorBoundary />

C<div>Done</div>

D<LoadingSpinner />

Attempts:

3 left

💡 Hint

Common Mistakes

Using null as fallback which shows nothing

Using an error boundary as fallback which is incorrect

Using a static 'Done' message which does not indicate loading

The fallback prop shows a loading spinner while the Profile component is loading.

3fill in blank

hard

Fix the error in the code to correctly use Suspense with a lazy-loaded component.

NextJS

const LazyProfile = React.lazy(() => import('./Profile'));

export default function Page() {
  return (
    <Suspense [1]>
      <LazyProfile />
    </Suspense>
  );
}

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

Aloading={<Loading />}

Bfallback={<Loading />}

Cfallback={Loading}

Dfallback='Loading...'

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'loading' instead of 'fallback' prop

Passing component reference without JSX brackets

Passing a string instead of a React element

The Suspense component requires a fallback prop with a React element to show while loading.

4fill in blank

hard

Fill both blanks to create a streaming component with Suspense and a loading fallback.

NextJS

export default function StreamPage() {
  return (
    <[1] [2]={<Spinner />}>
      <UserData />
    </[1]>
  );
}

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

ASuspense

Bfallback

Cloading

DErrorBoundary

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'loading' instead of 'fallback' prop

Using ErrorBoundary instead of Suspense

Forgetting to close the Suspense tag properly

Suspense wraps the UserData component and uses the fallback prop to show a spinner while loading.

5fill in blank

hard

Fill all three blanks to implement streaming with Suspense and a fallback loading message.

NextJS

import { [1] } from 'react';

const LazyComments = React.lazy(() => import('./Comments'));

export default function CommentsPage() {
  return (
    <[2] [3]={<p>Loading comments...</p>}>
      <LazyComments />
    </[2]>
  );
}

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

ASuspense

BuseState

Cfallback

Dloading

Attempts:

3 left

💡 Hint

Common Mistakes

Importing useState instead of Suspense

Using 'loading' instead of 'fallback' prop

Not wrapping LazyComments with Suspense

Suspense is imported and used to wrap LazyComments with a fallback prop showing a loading message.