Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 0 additions & 16 deletions src/content/reference/react-dom/server/renderToPipeableStream.md
Original file line number Diff line number Diff line change
Expand Up @@ -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)

<Note>

**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.

</Note>

---

### Specifying what goes into the shell {/*specifying-what-goes-into-the-shell*/}
Expand Down
16 changes: 0 additions & 16 deletions src/content/reference/react-dom/server/renderToReadableStream.md
Original file line number Diff line number Diff line change
Expand Up @@ -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)

<Note>

**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.

</Note>

---

### Specifying what goes into the shell {/*specifying-what-goes-into-the-shell*/}
Expand Down
16 changes: 0 additions & 16 deletions src/content/reference/react-dom/static/prerender.md
Original file line number Diff line number Diff line change
Expand Up @@ -271,22 +271,6 @@ function ProfilePage() {

Imagine that `<Posts />` 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.

<Note>

**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.

</Note>

---

### Aborting prerendering {/*aborting-prerendering*/}
Expand Down
16 changes: 0 additions & 16 deletions src/content/reference/react-dom/static/prerenderToNodeStream.md
Original file line number Diff line number Diff line change
Expand Up @@ -271,22 +271,6 @@ function ProfilePage() {

Imagine that `<Posts />` 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.

<Note>

**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.

</Note>

---

### Aborting prerendering {/*aborting-prerendering*/}
Expand Down
12 changes: 2 additions & 10 deletions src/content/reference/react/Activity.md
Original file line number Diff line number Diff line change
Expand Up @@ -870,17 +870,9 @@ Pre-rendering components with hidden Activity boundaries is a powerful way to re

<Note>

**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.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

But we can still warm up caches to reduce waterfalls right?

I mean calling React Query queryClient.prefetchQuery() while pre-rendering for example


</Note>

Expand Down
19 changes: 9 additions & 10 deletions src/content/reference/react/Suspense.md
Original file line number Diff line number Diff line change
Expand Up @@ -205,17 +205,14 @@ async function getAlbums() {

<Note>

**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.

</Note>

Expand Down Expand Up @@ -1681,7 +1678,9 @@ A Transition doesn't wait for *all* content to load. It only waits long enough t

<Note>

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.

</Note>

Expand Down
13 changes: 0 additions & 13 deletions src/content/reference/react/useDeferredValue.md
Original file line number Diff line number Diff line change
Expand Up @@ -84,19 +84,6 @@ During updates, the <CodeStep step={2}>deferred value</CodeStep> will "lag behin

**Let's walk through an example to see when this is useful.**

<Note>

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)

</Note>


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.

<Sandpack>
Expand Down
6 changes: 5 additions & 1 deletion src/content/reference/react/useTransition.md
Original file line number Diff line number Diff line change
Expand Up @@ -1551,7 +1551,11 @@ main {

<Note>

[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.

</Note>

Expand Down