Skip to content

Commit a2c9206

Browse files
committed
Fix broken anchor link for async components on the client
Add the missing 'Why can't I use async components on the client?' section and link to it from the async components example. Fixes #7305
1 parent 8bb31ac commit a2c9206

1 file changed

Lines changed: 9 additions & 1 deletion

File tree

src/content/reference/rsc/server-components.md

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -293,4 +293,12 @@ function Comments({commentsPromise}) {
293293

294294
The `note` content is important data for the page to render, so we `await` it on the server. The comments are below the fold and lower-priority, so we start the promise on the server, and wait for it on the client with the `use` API. This will Suspend on the client, without blocking the `note` content from rendering.
295295

296-
Since async components are not supported on the client, we await the promise with `use`.
296+
Since async components are [not supported on the client](#why-cant-i-use-async-components-on-the-client), we await the promise with `use`.
297+
298+
<Note>
299+
300+
#### Why can't I use async components on the client? {/*why-cant-i-use-async-components-on-the-client*/}
301+
302+
Async components are a Server Component feature. Client Components need to run synchronously so they can use Hooks and respond to interactions. To wait for async data on the client, pass a Promise from a Server Component and read it with [`use`](/reference/react/use) instead.
303+
304+
</Note>

0 commit comments

Comments
 (0)