docs: clarify client component intro (#62767)

"Render on the client" could sound like client-only rendering.
This commit is contained in:
Lee Robinson
2024-03-02 16:39:04 -06:00
committed by GitHub
parent bd28752495
commit 1d00ed4bf1
@@ -3,7 +3,7 @@ title: Client Components
description: Learn how to use Client Components to render parts of your application on the client.
---
Client Components allow you to write interactive UI that can be rendered on the client at request time. In Next.js, client rendering is **opt-in**, meaning you have to explicitly decide what components React should render on the client.
Client Components allow you to write interactive UI that is [prerendered on the server](https://github.com/reactwg/server-components/discussions/4) and can use client JavaScript to run in the browser.
This page will go through how Client Components work, how they're rendered, and when you might use them.
@@ -12,7 +12,7 @@ This page will go through how Client Components work, how they're rendered, and
There are a couple of benefits to doing the rendering work on the client, including:
- **Interactivity**: Client Components can use state, effects, and event listeners, meaning they can provide immediate feedback to the user and update the UI.
- **Browser APIs**: Client Components have access to browser APIs, like [geolocation](https://developer.mozilla.org/docs/Web/API/Geolocation_API) or [localStorage](https://developer.mozilla.org/docs/Web/API/Window/localStorage), allowing you to build UI for specific use cases.
- **Browser APIs**: Client Components have access to browser APIs, like [geolocation](https://developer.mozilla.org/docs/Web/API/Geolocation_API) or [localStorage](https://developer.mozilla.org/docs/Web/API/Window/localStorage).
## Using Client Components in Next.js
@@ -54,7 +54,7 @@ export default function Counter() {
}
```
The diagram below shows that using `onClick` and `useState` in a nested component (`toggle.js`) will cause an error if the `"use client"` directive is not defined. This is because, by default, the components are rendered on the server where these APIs are not available. By defining the `"use client"` directive in `toggle.js`, you can tell React to render the component and its children on the client, where the APIs are available.
The diagram below shows that using `onClick` and `useState` in a nested component (`toggle.js`) will cause an error if the `"use client"` directive is not defined. This is because, by default, all components in the App Router are Server Components where these APIs are not available. By defining the `"use client"` directive in `toggle.js`, you can tell React to enter the client boundary where these APIs are available.
<Image
alt="Use Client Directive and Network Boundary"
@@ -66,7 +66,7 @@ The diagram below shows that using `onClick` and `useState` in a nested componen
> **Defining multiple `use client` entry points**:
>
> You can define multiple "use client" entry points in your React Component tree. This allows you to split your application into multiple client bundles (or branches).
> You can define multiple "use client" entry points in your React Component tree. This allows you to split your application into multiple client bundles.
>
> However, `"use client"` doesn't need to be defined in every component that needs to be rendered on the client. Once you define the boundary, all child components and modules imported into it are considered part of the client bundle.