use client

'use client' 指令声明了要在客户端渲染的组件的入口点，并且在创建需要客户端 JavaScript 功能的交互式用户界面 (UI) 时应该使用，例如状态管理、事件处理和访问浏览器 API。这是一个 React 功能。

须知

您无需将 'use client' 指令添加到包含客户端组件的每个文件中。您只需要将其添加到您希望直接在服务器组件中渲染其组件的文件中。'use client' 指令定义了客户端-服务器边界，并且从此类文件导出的组件充当客户端的入口点。

用法

要声明客户端组件的入口点，请将 'use client' 指令添加到文件的顶部，在任何导入之前

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

使用 'use client' 指令时，客户端组件的 props 必须是可序列化的。这意味着在将数据从服务器发送到客户端时，props 需要采用 React 可以序列化的格式。

'use client'
 
export default function Counter({
  onClick /* ❌ Function is not serializable */,
}) {
  return (
    <div>
      <button onClick={onClick}>Increment</button>
    </div>
  )
}

在服务器组件中嵌套客户端组件

结合使用服务器组件和客户端组件可以构建既高性能又具有交互性的应用程序

服务器组件：用于静态内容、数据获取和对 SEO 友好的元素。
客户端组件：用于需要状态、效果或浏览器 API 的交互式元素。
组件组合：根据需要将客户端组件嵌套在服务器组件中，以清晰地分离服务器和客户端逻辑。

在以下示例中

Header 是处理静态内容的服务器组件。
Counter 是在页面中实现交互性的客户端组件。

import Header from './header'
import Counter from './counter' // This is a Client Component
 
export default function Page() {
  return (
    <div>
      <Header />
      <Counter />
    </div>
  )
}

参考

有关 'use client' 的更多信息，请参阅React 文档。