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.

Author: cursoragent

src/content/reference/rsc/use-client.md

@@ -151,18 +151,22 @@ 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.
 </Diagram>
 
-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.
 
 <Diagram name="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.">
 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.
 </Diagram>
 
 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.
 
 </DeepDive>