Summary - Streaming SSR

Set up a structure that lazily loads a section with Suspense.

Summary - Streaming SSR

In this group you learned streaming SSR, streaming with Suspense and edge rendering.

renderToReadableStream sends the page in chunks; Suspense marks the streaming boundaries; the edge runtime lowers latency. The first contentful paint speeds up.

The user never waits with an empty screen; slow sections are appended to the stream when ready. Now you will write a streaming page.

Exercise Write the StreamArticlePage component

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

Show example solution

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

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

Test yourself

Which is true?
- Suspense is a streaming boundary
- renderToString does streaming
- fallback is shown only on error
- Edge supports the fs module
Show answer

Suspense is a streaming boundary — Suspense marks the streaming point.

Fill in the blank: import Suspense

import { ____ } from 'react';

<Suspense fallback={<p>...</p>}>
  <SlowList />
</Suspense>

Show answer

import { Suspense } from 'react';

<Suspense fallback={<p>...</p>}>
  <SlowList />
</Suspense>

Match concepts

renderToReadableStream

Gives ReadableStream
Suspense

Stream boundary
edge

Renders close
fallback

Loading content

Next lesson: What is Concurrent React?

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies