use client

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

用法

要将组件指定为客户端组件，请在文件顶部、任何导入语句之前添加 use client 指令

app/components/counter.tsx

'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>
  )
}

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

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

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

在以下示例中

Header 是一个服务器组件，用于处理静态内容。
Counter 是一个客户端组件，用于在页面中启用交互性。

app/page.tsx

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 文档。