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
+14-6Lines changed: 14 additions & 6 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -203,17 +203,25 @@ async function getAlbums() {
203
203
204
204
</Sandpack>
205
205
206
-
<Note>
206
+
---
207
+
208
+
### What activates a Suspense boundary {/*what-activates-a-suspense-boundary*/}
207
209
208
-
**Only Suspense-enabled data sources will activate the Suspense component.** They include:
210
+
A Suspense boundary displays its `fallback` while its content is loading, and it can also wait on other resources before revealing that content. The following activate a boundary:
209
211
210
-
- Data fetching with Suspense-enabled frameworks like [Relay](https://relay.dev/docs/guided-tour/rendering/loading-states/) and [Next.js](https://nextjs.org/docs/app/building-your-application/routing/loading-ui-and-streaming#streaming-with-suspense)
211
-
- Lazy-loading component code with [`lazy`](/reference/react/lazy)
212
-
- Reading the value of a cached Promise with [`use`](/reference/react/use)
212
+
- Lazy-loading component code with [`lazy`](/reference/react/lazy).
213
+
- Reading a Promise with [`use`](/reference/react/use), including data streamed from [Server Components](/reference/rsc/server-components) and integrations from frameworks like [Relay](https://relay.dev/docs/guided-tour/rendering/loading-states/).
214
+
- 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.
215
+
- Loading fonts. React blocks a streamed boundary until [`document.fonts.ready`](https://developer.mozilla.org/en-US/docs/Web/API/FontFaceSet/ready) resolves, up to a timeout. Fonts also block a [`<ViewTransition>`](/reference/react/ViewTransition) update.
216
+
- Streaming a large boundary's HTML during server rendering. React reveals the content as the HTML arrives.
217
+
- Loading an image, where `img.src` blocks the boundary until the source loads. This behavior is not enabled by default. An `<img onLoad>` handler opts out, and images in a [`<ViewTransition>`](/reference/react/ViewTransition) update opt in automatically.
218
+
- <ExperimentalBadge /> Performing CPU-bound render work inside a `<Suspense>` boundary marked with the `defer` prop.
219
+
220
+
<Note>
213
221
214
222
Suspense **does not** detect when data is fetched inside an Effect or event handler.
215
223
216
-
The exact way you would load data in the `Albums` component above depends on your framework. If you use a Suspense-enabled framework, you'll find the details in its data fetching documentation.
224
+
The exact way you would load data in the `Albums` component above depends on your framework. If you use a framework with built-in Suspense support, you'll find the details in its data fetching documentation.
217
225
218
226
Suspense-enabled data fetching without the use of an opinionated framework is not yet supported. The requirements for implementing a Suspense-enabled data source are unstable and undocumented. An official API for integrating data sources with Suspense will be released in a future version of React.
0 commit comments