客户端组件

客户端组件允许您编写可以在请求时在客户端上呈现的交互式UI。在Next.js中，客户端渲染是可选择的(opt-in)，这意味着您必须明确决定React应在客户端上渲染哪些组件。

本页面将介绍客户端组件的工作原理、它们是如何渲染的以及何时使用它们。

客户端渲染的好处

在客户端进行渲染工作有一些好处，包括：

互动性：客户端组件可以使用状态、效果和事件侦听器，这意味着它们可以为用户提供即时反馈并更新UI。
浏览器API：客户端组件可以访问浏览器API，如地理位置或 localStorage，使您能够为特定用例构建UI。

在Next.js中使用客户端组件

要使用客户端组件，您可以在文件的顶部（在导入之前）添加React的"use client"指令。

"use client"用于声明服务器和客户端组件模块之间的边界。这意味着通过在文件中定义"use client"，导入到该文件的所有其他模块，包括子组件，都被视为客户端捆绑的一部分。

app/counter.tsx

'use client'
 
import { useState } from 'react'
 
export default function Counter() {
  const [count, setCount] = useState(0)
 
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  )
}

下面的图示显示，如果未定义"use client"指令，则在嵌套组件（toggle.js）中使用onClick和useState会导致错误。这是因为默认情况下，在服务器上渲染组件，这些API是不可用的。通过在toggle.js中定义"use client"指令，您可以告诉React在客户端上渲染组件及其子组件，其中这些API是可用的。

use client directive

定义多个`"use client"`入口点：

您可以在React组件树中定义多个"use client"入口点。这允许您将应用程序拆分为多个客户端捆绑包（或分支）。

但是，并不需要在每个需要在客户端上渲染的组件中定义"use client"。一旦定义了边界，所有子组件和导入到其中的模块都被视为客户端捆绑的一部分。