Challenge: Streaming page

Write a streaming page where a section loads later with Suspense.

Challenge: Streaming page

In this challenge you will write a page that streams with Suspense. A fallback is shown until the slow component is ready.

When the page opens the first HTML arrives immediately; the slow section is appended when ready. The user never waits with an empty screen; the fallback content appears while the slow section is being prepared.

Exercise Write the StreamPage component

Write StreamPage. Import Suspense. Inside <Suspense fallback={<p>Loading</p>}> show <SlowFeed />. Export it.

Show example solution

import { Suspense } from 'react';
import SlowFeed from './SlowFeed';

function StreamPage() {
  return (
    <Suspense fallback={<p>Loading</p>}>
      <SlowFeed />
    </Suspense>
  );
}
export default StreamPage;

Test yourself

When is the Suspense fallback shown?
- When the component is ready
- Only on error
- Never
- While the component is loading
Show answer

While the component is loading — The fallback appears during the wait.

Fill in the blank: add a Suspense boundary

<Suspense fallback={<p>Loading</p>}>
  <____ />
</Suspense>

Show answer

<Suspense fallback={<p>Loading</p>}>
  <SlowFeed />
</Suspense>

Next lesson: Challenge: Custom renderer skeleton

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies