Next.js 中文网

主题

使用客户端 ​

¥use client

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

¥The 'use client' directive declares an entry point for the components to be rendered on the client side and should be used when creating interactive user interfaces (UI) that require client-side JavaScript capabilities, such as state management, event handling, and access to browser APIs. This is a React feature.

需要了解：

¥Good to know:

你无需将 'use client' 指令添加到每个包含客户端组件的文件中。你只需要将其添加到你想要在服务器组件中直接渲染其组件的文件中。'use client' 指令定义了客户端-服务器 boundary，从此类文件导出的组件将作为客户端的入口点。

¥You do not need to add the 'use client' directive to every file that contains Client Components. You only need to add it to the files whose components you want to render directly within Server Components. The 'use client' directive defines the client-server boundary, and the components exported from such a file serve as entry points to the client.

用法 ​

¥Usage

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

¥To declare an entry point for the Client Components, add the 'use client' directive at the top of the file, before any imports:

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

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

¥When using the 'use client' directive, the props of the Client Components must be serializable. This means the props need to be in a format that React can serialize when sending data from the server to the client.

tsx
'use client'

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

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

¥Nesting Client Components within Server Components

结合服务器和客户端组件允许你构建高性能和交互式的应用：

¥Combining Server and Client Components allows you to build applications that are both performant and interactive:

  1. 服务器组件：用于静态内容、数据获取和 SEO 友好元素。

    ¥Server Components: Use for static content, data fetching, and SEO-friendly elements.

  2. 客户端组件：用于需要状态、效果或浏览器 API 的交互元素。

    ¥Client Components: Use for interactive elements that require state, effects, or browser APIs.

  3. 组件组成：根据需要将客户端组件嵌套在服务器组件中，以明确分离服务器和客户端逻辑。

    ¥Component composition: Nest Client Components within Server Components as needed for a clear separation of server and client logic.

在下面的例子中：

¥In the following example:

  • Header 是一个处理静态内容的服务器组件。

    ¥Header is a Server Component handling static content.

  • Counter 是一个客户端组件，可在页面内实现交互。

    ¥Counter is a Client Component enabling interactivity within the page.

tsx
import Header from './header'
import Counter from './counter' // This is a Client Component

export default function Page() {
  return (
    <div>
      <Header />
      <Counter />
    </div>
  )
}

参考 ​

¥Reference

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

¥See the React documentation for more information on 'use client'.