From 565ec587396635f084299a282047fbf6168bf681 Mon Sep 17 00:00:00 2001 From: Cursor Agent Date: Sun, 21 Jun 2026 17:11:19 +0000 Subject: [PATCH 1/2] docs: clarify Client Components are pre-rendered during SSR Fixes reactjs/react.dev#7223 The use-client reference incorrectly implied that Client Components are skipped during server rendering. Client Components are pre-rendered to HTML on the server and hydrated on the client. --- src/content/reference/rsc/use-client.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/content/reference/rsc/use-client.md b/src/content/reference/rsc/use-client.md index 4c6051977ef..b70b312a558 100644 --- a/src/content/reference/rsc/use-client.md +++ b/src/content/reference/rsc/use-client.md @@ -151,9 +151,9 @@ In the module dependency tree of this example app, the `'use client'` directive `'use client'` segments the module dependency tree of the React Server Components app, marking `InspirationGenerator.js` and all of its dependencies as client-rendered. -During render, the framework will server-render the root component and continue through the [render tree](/learn/understanding-your-ui-as-a-tree#the-render-tree), opting-out of evaluating any code imported from client-marked code. +During render, the framework will server-render the root component and continue through the [render tree](/learn/understanding-your-ui-as-a-tree#the-render-tree). Client Components are also pre-rendered on the server to HTML. Their module source code is bundled for the client separately from Server Components. -The server-rendered portion of the render tree is then sent to the client. The client, with its client code downloaded, then completes rendering the rest of the tree. +The rendered HTML is sent to the client. The client downloads the client bundles and hydrates Client Components, attaching event handlers and other client-only behavior. The render tree for the React Server Components app. `InspirationGenerator` and its child component `FancyText` are components exported from client-marked code and considered Client Components. @@ -161,10 +161,10 @@ The render tree for the React Server Components app. `InspirationGenerator` and We introduce the following definitions: -* **Client Components** are components in a render tree that are rendered on the client. -* **Server Components** are components in a render tree that are rendered on the server. +* **Client Components** are component usages whose module is marked with `'use client'` or is a transitive dependency of one. They can be pre-rendered on the server and are hydrated on the client. +* **Server Components** are component usages that are not Client Components. They are rendered on the server only. -Working through the example app, `App`, `FancyText` and `Copyright` are all server-rendered and considered Server Components. As `InspirationGenerator.js` and its transitive dependencies are marked as client code, the component `InspirationGenerator` and its child component `FancyText` are Client Components. +Working through the example app, `App`, `FancyText` and `Copyright` are considered Server Components. As `InspirationGenerator.js` and its transitive dependencies are marked as client code, the component usages `InspirationGenerator` and its child `FancyText` are Client Components. #### How is `FancyText` both a Server and a Client Component? {/*how-is-fancytext-both-a-server-and-a-client-component*/} From 4744df8880325dc1f47694a2bbc985a63db1205b Mon Sep 17 00:00:00 2001 From: Cursor Agent Date: Fri, 26 Jun 2026 19:06:05 +0000 Subject: [PATCH 2/2] docs: rewrite Client/Server definitions with symmetrical framing Separate component type (module boundaries) from rendering (framework decides where code runs). Define Client Components as code sent to the client, optionally prerendered to HTML ahead of time. Addresses maintainer feedback on #8489 from @gaearon. --- src/content/reference/rsc/use-client.md | 14 +++++++++----- 1 file changed, 9 insertions(+), 5 deletions(-) diff --git a/src/content/reference/rsc/use-client.md b/src/content/reference/rsc/use-client.md index b70b312a558..92427b03020 100644 --- a/src/content/reference/rsc/use-client.md +++ b/src/content/reference/rsc/use-client.md @@ -151,9 +151,13 @@ In the module dependency tree of this example app, the `'use client'` directive `'use client'` segments the module dependency tree of the React Server Components app, marking `InspirationGenerator.js` and all of its dependencies as client-rendered. -During render, the framework will server-render the root component and continue through the [render tree](/learn/understanding-your-ui-as-a-tree#the-render-tree). Client Components are also pre-rendered on the server to HTML. Their module source code is bundled for the client separately from Server Components. +There are two separate concepts to understand: **component type** and **rendering**. -The rendered HTML is sent to the client. The client downloads the client bundles and hydrates Client Components, attaching event handlers and other client-only behavior. +**Component type** is determined by the React tree and module boundaries. When the framework walks the [render tree](/learn/understanding-your-ui-as-a-tree#the-render-tree), each component usage is either a Client Component or a Server Component based on whether its module is marked with `'use client'` or is a transitive dependency of one. + +**Rendering** is where and when those component usages are evaluated and turned into output (such as HTML). This is determined by the framework and the render pass. Server Components are evaluated on the server. Client Components are sent to the client as executable code. Frameworks may also prerender Client Components to HTML ahead of time so the page can display before client code loads. + +On the client, the framework downloads the Client Component bundles and hydrates any prerendered Client Components, attaching event handlers and other client-only behavior. The render tree for the React Server Components app. `InspirationGenerator` and its child component `FancyText` are components exported from client-marked code and considered Client Components. @@ -161,8 +165,8 @@ The render tree for the React Server Components app. `InspirationGenerator` and We introduce the following definitions: -* **Client Components** are component usages whose module is marked with `'use client'` or is a transitive dependency of one. They can be pre-rendered on the server and are hydrated on the client. -* **Server Components** are component usages that are not Client Components. They are rendered on the server only. +* **Client Components** are component usages whose module is marked with `'use client'` or is a transitive dependency of one. Their code is sent to the client. They may also be prerendered to HTML ahead of time. +* **Server Components** are component usages that are not Client Components. They run only on the server and are never sent to the client as executable code. Working through the example app, `App`, `FancyText` and `Copyright` are considered Server Components. As `InspirationGenerator.js` and its transitive dependencies are marked as client code, the component usages `InspirationGenerator` and its child `FancyText` are Client Components. @@ -206,7 +210,7 @@ Back to the question of `FancyText`, we see that the component definition does _ The usage of `FancyText` as a child of `App`, marks that usage as a Server Component. When `FancyText` is imported and called under `InspirationGenerator`, that usage of `FancyText` is a Client Component as `InspirationGenerator` contains a `'use client'` directive. -This means that the component definition for `FancyText` will both be evaluated on the server and also downloaded by the client to render its Client Component usage. +This means that the component definition for `FancyText` is evaluated for its Server Component usage during the initial render, and its code is also sent to the client to render its Client Component usage.