You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: src/content/reference/react/Suspense.md
+5-6Lines changed: 5 additions & 6 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -40,14 +40,14 @@ title: <Suspense>
40
40
41
41
### What activates a Suspense boundary {/*what-activates-a-suspense-boundary*/}
42
42
43
-
A Suspense boundary waits for its content to be ready before revealing it. Any of the following blocks a boundary's content from being revealed:
43
+
A Suspense boundary waits for its content to be ready before revealing it. Any of the following keeps a boundaryfrom revealing its content:
44
44
45
45
- Lazy-loading component code with [`lazy`](/reference/react/lazy).
46
-
- Reading a Promise with [`use`](/reference/react/use), including data streamed from [Server Components](/reference/rsc/server-components) or provided by a [Suspense-enabled framework](#suspense-enabled-frameworks).
46
+
- Reading a Promise with [`use`](/reference/react/use), including data streamed from [Server Components](/reference/rsc/server-components) or loaded through a [Suspense-enabled framework](#suspense-enabled-frameworks).
47
47
- Loading a stylesheet rendered with [`<link rel="stylesheet">` and a `precedence` prop.](/reference/react-dom/components/link#special-rendering-behavior) React blocks the boundary until the stylesheet loads, up to a timeout.
48
-
- Loading fonts. When a boundary is revealed by streamed SSR content, React waits for [`document.fonts.ready`](https://developer.mozilla.org/en-US/docs/Web/API/FontFaceSet/ready) before showing it, up to a timeout, so text doesn't flash with a fallback font. Fonts also block a [`<ViewTransition>`](/reference/react/ViewTransition) update.
48
+
- Loading fonts. When streamed server-side rendering (SSR) content reveals a boundary, React waits for [`document.fonts.ready`](https://developer.mozilla.org/en-US/docs/Web/API/FontFaceSet/ready) before showing it, up to a timeout, so text doesn't flash with a fallback font. Fonts also block a [`<ViewTransition>`](/reference/react/ViewTransition) update.
49
49
- Streaming a large boundary's HTML during server rendering. React reveals the content as the HTML arrives.
50
-
- Loading an image, where the `src` blocks the boundary until the image loads. This behavior is not enabled by default. When enabled, an `onLoad` handler opts an image out, and images in a [`<ViewTransition>`](/reference/react/ViewTransition) update opt in automatically.
50
+
- Loading an image, where the `src` blocks the boundary until the image loads. This doesn't happen by default, but a [`<ViewTransition>`](/reference/react/ViewTransition) update turns it on automatically for its images, and you can add an `onLoad` handler to opt a specific image out.
51
51
- <ExperimentalBadge /> Performing CPU-bound render work inside a `<Suspense>` boundary marked with the `defer` prop.
52
52
53
53
<Note>
@@ -231,7 +231,6 @@ async function getAlbums() {
231
231
232
232
By contrast, code that fetches data outside of `use`, such as inside an Effect, does not activate the boundary:
233
233
234
-
235
234
<Sandpack>
236
235
237
236
```js src/App.js hidden
@@ -398,7 +397,7 @@ async function getAlbums() {
398
397
399
398
</Sandpack>
400
399
401
-
During streaming server rendering, a boundary also activates as its HTML arrives. With any streaming SSR API, React sends the shell with the `fallback` first, then streams in each boundary's HTML and swaps out its `fallback` as that content arrives. This progressive reveal applies only to content streamed from the server, not to updates on the client:
400
+
During streaming server rendering, a boundary also activates as its HTML arrives. With any streaming SSR API, React sends [the shell](/reference/react-dom/server/renderToPipeableStream#specifying-what-goes-into-the-shell) with the `fallback` first, then streams in each boundary's HTML and swaps out its `fallback` as that content arrives. This progressive reveal applies only to content the server streams, not to updates on the client:
0 commit comments