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
docs: clarify Client Components are pre-rendered during SSR
Fixes#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.
Copy file name to clipboardExpand all lines: src/content/reference/rsc/use-client.md
+5-5Lines changed: 5 additions & 5 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -151,20 +151,20 @@ In the module dependency tree of this example app, the `'use client'` directive
151
151
`'use client'` segments the module dependency tree of the React Server Components app, marking `InspirationGenerator.js` and all of its dependencies as client-rendered.
152
152
</Diagram>
153
153
154
-
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.
154
+
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.
155
155
156
-
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.
156
+
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.
157
157
158
158
<Diagramname="use_client_render_tree"height={250}width={500}alt="A tree graph where each node represents a component and its children as child components. The top-level node is labelled 'App' and it has two child components 'InspirationGenerator' and 'FancyText'. 'InspirationGenerator' has two child components, 'FancyText' and 'Copyright'. Both 'InspirationGenerator' and its child component 'FancyText' are marked to be client-rendered.">
159
159
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.
160
160
</Diagram>
161
161
162
162
We introduce the following definitions:
163
163
164
-
***Client Components** are components in a render tree that are rendered on the client.
165
-
***Server Components** are components in a render tree that are rendered on the server.
164
+
***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.
165
+
***Server Components** are component usages that are not Client Components. They are rendered on the server only.
166
166
167
-
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.
167
+
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.
168
168
169
169
<DeepDive>
170
170
#### How is `FancyText` both a Server and a Client Component? {/*how-is-fancytext-both-a-server-and-a-client-component*/}
0 commit comments