diff --git a/src/content/reference/react-dom/server/renderToPipeableStream.md b/src/content/reference/react-dom/server/renderToPipeableStream.md index 7d0d1ab3dbb..c656c56ade3 100644 --- a/src/content/reference/react-dom/server/renderToPipeableStream.md +++ b/src/content/reference/react-dom/server/renderToPipeableStream.md @@ -282,22 +282,6 @@ Streaming does not need to wait for React itself to load in the browser, or for [Read more about how streaming HTML works.](https://github.com/reactwg/react-18/discussions/37) - - -**Only Suspense-enabled data sources will activate the Suspense component.** They include: - -- Data fetching with Suspense-enabled frameworks like [Relay](https://relay.dev/docs/guided-tour/rendering/loading-states/) and [Next.js](https://nextjs.org/docs/getting-started/react-essentials) -- Lazy-loading component code with [`lazy`](/reference/react/lazy) -- Reading the value of a Promise with [`use`](/reference/react/use) - -Suspense **does not** detect when data is fetched inside an Effect or event handler. - -The exact way you would load data in the `Posts` component above depends on your framework. If you use a Suspense-enabled framework, you'll find the details in its data fetching documentation. - -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. - - - --- ### Specifying what goes into the shell {/*specifying-what-goes-into-the-shell*/} diff --git a/src/content/reference/react-dom/server/renderToReadableStream.md b/src/content/reference/react-dom/server/renderToReadableStream.md index f407f2245f4..59eb58f29ba 100644 --- a/src/content/reference/react-dom/server/renderToReadableStream.md +++ b/src/content/reference/react-dom/server/renderToReadableStream.md @@ -281,22 +281,6 @@ Streaming does not need to wait for React itself to load in the browser, or for [Read more about how streaming HTML works.](https://github.com/reactwg/react-18/discussions/37) - - -**Only Suspense-enabled data sources will activate the Suspense component.** They include: - -- Data fetching with Suspense-enabled frameworks like [Relay](https://relay.dev/docs/guided-tour/rendering/loading-states/) and [Next.js](https://nextjs.org/docs/getting-started/react-essentials) -- Lazy-loading component code with [`lazy`](/reference/react/lazy) -- Reading the value of a Promise with [`use`](/reference/react/use) - -Suspense **does not** detect when data is fetched inside an Effect or event handler. - -The exact way you would load data in the `Posts` component above depends on your framework. If you use a Suspense-enabled framework, you'll find the details in its data fetching documentation. - -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. - - - --- ### Specifying what goes into the shell {/*specifying-what-goes-into-the-shell*/} diff --git a/src/content/reference/react-dom/static/prerender.md b/src/content/reference/react-dom/static/prerender.md index 4bbf6c35dae..b048bc349f6 100644 --- a/src/content/reference/react-dom/static/prerender.md +++ b/src/content/reference/react-dom/static/prerender.md @@ -271,22 +271,6 @@ function ProfilePage() { Imagine that `` needs to load some data, which takes some time. Ideally, you'd want wait for the posts to finish so it's included in the HTML. To do this, you can use Suspense to suspend on the data, and `prerender` will wait for the suspended content to finish before resolving to the static HTML. - - -**Only Suspense-enabled data sources will activate the Suspense component.** They include: - -- Data fetching with Suspense-enabled frameworks like [Relay](https://relay.dev/docs/guided-tour/rendering/loading-states/) and [Next.js](https://nextjs.org/docs/getting-started/react-essentials) -- Lazy-loading component code with [`lazy`](/reference/react/lazy) -- Reading the value of a Promise with [`use`](/reference/react/use) - -Suspense **does not** detect when data is fetched inside an Effect or event handler. - -The exact way you would load data in the `Posts` component above depends on your framework. If you use a Suspense-enabled framework, you'll find the details in its data fetching documentation. - -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. - - - --- ### Aborting prerendering {/*aborting-prerendering*/} diff --git a/src/content/reference/react-dom/static/prerenderToNodeStream.md b/src/content/reference/react-dom/static/prerenderToNodeStream.md index cc99c52d4e4..7424cb5c069 100644 --- a/src/content/reference/react-dom/static/prerenderToNodeStream.md +++ b/src/content/reference/react-dom/static/prerenderToNodeStream.md @@ -271,22 +271,6 @@ function ProfilePage() { Imagine that `` needs to load some data, which takes some time. Ideally, you'd want wait for the posts to finish so it's included in the HTML. To do this, you can use Suspense to suspend on the data, and `prerenderToNodeStream` will wait for the suspended content to finish before resolving to the static HTML. - - -**Only Suspense-enabled data sources will activate the Suspense component.** They include: - -- Data fetching with Suspense-enabled frameworks like [Relay](https://relay.dev/docs/guided-tour/rendering/loading-states/) and [Next.js](https://nextjs.org/docs/getting-started/react-essentials) -- Lazy-loading component code with [`lazy`](/reference/react/lazy) -- Reading the value of a Promise with [`use`](/reference/react/use) - -Suspense **does not** detect when data is fetched inside an Effect or event handler. - -The exact way you would load data in the `Posts` component above depends on your framework. If you use a Suspense-enabled framework, you'll find the details in its data fetching documentation. - -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. - - - --- ### Aborting prerendering {/*aborting-prerendering*/} diff --git a/src/content/reference/react/Activity.md b/src/content/reference/react/Activity.md index 09b79c79f0b..30b2ebce3ad 100644 --- a/src/content/reference/react/Activity.md +++ b/src/content/reference/react/Activity.md @@ -870,17 +870,9 @@ Pre-rendering components with hidden Activity boundaries is a powerful way to re -**Only Suspense-enabled data sources will be fetched during pre-rendering.** They include: +**Activity does not fetch data inside an Effect during pre-render.** -- 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) -- Lazy-loading component code with [`lazy`](/reference/react/lazy) -- Reading the value of a cached Promise with [`use`](/reference/react/use) - -Activity **does not** detect data that is fetched inside an Effect. - -The exact way you would load data in the `Posts` component above depends on your framework. If you use a Suspense-enabled framework, you'll find the details in its data fetching documentation. - -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. +Since Effects are not mounted, only data fetched in render using Suspense will be pre-rendered. diff --git a/src/content/reference/react/Suspense.md b/src/content/reference/react/Suspense.md index 4fce69d694f..c338e29fc31 100644 --- a/src/content/reference/react/Suspense.md +++ b/src/content/reference/react/Suspense.md @@ -205,17 +205,14 @@ async function getAlbums() { -**Only Suspense-enabled data sources will activate the Suspense component.** They include: +**The Suspense component is activated by suspending.** This includes: -- 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) -- Lazy-loading component code with [`lazy`](/reference/react/lazy) -- Reading the value of a cached Promise with [`use`](/reference/react/use) +- Reading the value of a Promise with [`use`](/reference/react/use). +- Lazy-loading component code with [`lazy`](/reference/react/lazy). +- Data-fetching libraries that suspend, like [TanStack Query](https://tanstack.com/query/latest/docs/framework/react/guides/suspense) and [Relay](https://relay.dev/docs/guided-tour/rendering/loading-states/). +- Frameworks that support [Server Components](/reference/rsc/server-components), like [React Router v7](/learn/start-a-new-react-project#react-router-v7) and [Next.js App Router](/learn/start-a-new-react-project#nextjs-app-router). -Suspense **does not** detect when data is fetched inside an Effect or event handler. - -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. - -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. +Suspense **does not** activate when data is fetched inside an Effect or event handler. @@ -1681,7 +1678,9 @@ A Transition doesn't wait for *all* content to load. It only waits long enough t -Suspense-enabled routers are expected to wrap the navigation updates into Transitions by default. +To support [Suspense](/reference/react/Suspense), Routers are expected to wrap the navigation updates into Transitions by default. + +See [Building a Suspense-enabled router](/reference/react/useTransition#building-a-suspense-enabled-router) for more info. diff --git a/src/content/reference/react/useDeferredValue.md b/src/content/reference/react/useDeferredValue.md index ed561c977b7..7f1affdeba3 100644 --- a/src/content/reference/react/useDeferredValue.md +++ b/src/content/reference/react/useDeferredValue.md @@ -84,19 +84,6 @@ During updates, the deferred value will "lag behin **Let's walk through an example to see when this is useful.** - - -This example assumes you use a Suspense-enabled data source: - -- 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/getting-started/fetching-data#with-suspense) -- Lazy-loading component code with [`lazy`](/reference/react/lazy) -- Reading the value of a Promise with [`use`](/reference/react/use) - -[Learn more about Suspense and its limitations.](/reference/react/Suspense) - - - - In this example, the `SearchResults` component [suspends](/reference/react/Suspense#displaying-a-fallback-while-content-is-loading) while fetching the search results. Try typing `"a"`, waiting for the results, and then editing it to `"ab"`. The results for `"a"` get replaced by the loading fallback. diff --git a/src/content/reference/react/useTransition.md b/src/content/reference/react/useTransition.md index 52707814334..231750e894f 100644 --- a/src/content/reference/react/useTransition.md +++ b/src/content/reference/react/useTransition.md @@ -1551,7 +1551,11 @@ main { -[Suspense-enabled](/reference/react/Suspense) routers are expected to wrap the navigation updates into Transitions by default. +To support [Suspense](/reference/react/Suspense), Routers are expected to wrap the navigation updates into Transitions by default. + +This allows Routers to automatically support [displaying a fallback while content is loading](/reference/react/Suspense#displaying-a-fallback-while-content-is-loading) when navigating to new routes, and [preventing already revealed content from hiding](/reference/react/Suspense#preventing-already-revealed-content-from-hiding) when refreshing the current route. + +Popular routers like [TanStack Router](https://tanstack.com/router/latest) and [React Router](https://reactrouter.com/) already support transitions by default.