客户端组件

客户端组件允许你编写交互式 UI，这些 UI 会在服务器端预渲染，并可以在浏览器中运行客户端 JavaScript。

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

客户端渲染的优势

在客户端进行渲染工作有以下几个优势：

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

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

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

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

app/counter.tsx

TypeScript

'use client'
 
import { useState } from 'react'
 
export default function Counter() {
  const [count, setCount] = useState(0)
 
  return (
    <div>
      <p>你点击了 {count} 次</p>
      <button onClick={() => setCount(count + 1)}>点击我</button>
    </div>
  )
}

下图显示，如果没有定义 "use client" 指令，在嵌套组件 (toggle.js) 中使用 onClick 和 useState 会导致错误。这是因为在 App Router 中，默认情况下所有组件都是服务器组件，这些 API 在服务器组件中是不可用的。通过在 toggle.js 中定义 "use client" 指令，你可以告诉 React 进入可以使用这些 API 的客户端边界。

定义多个 use client 入口点：

你可以在 React 组件树中定义多个 "use client" 入口点。这样可以将应用程序拆分成多个客户端包。

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

客户端组件是如何渲染的？

在 Next.js 中，客户端组件的渲染方式会根据请求类型而不同：完整页面加载（首次访问应用程序或浏览器刷新触发的页面重新加载）或后续导航。

完整页面加载

为了优化初始页面加载，Next.js 会使用 React 的 API 在服务器上为客户端组件和服务器组件渲染静态 HTML 预览。这意味着，当用户首次访问你的应用程序时，他们会立即看到页面内容，而无需等待客户端下载、解析和执行客户端组件的 JavaScript 包。

在服务器上：

React 将服务器组件渲染成一种称为 React 服务器组件负载 (RSC Payload) 的特殊数据格式，其中包含对客户端组件的引用。
Next.js 使用 RSC Payload 和客户端组件 JavaScript 指令在服务器上为路由渲染 HTML。

然后，在客户端：

HTML 用于立即显示路由的快速非交互式初始预览。
React 服务器组件负载用于协调客户端和服务器组件树，并更新 DOM。
JavaScript 指令用于水合客户端组件并使其 UI 具有交互性。

什么是水合？

水合是将事件监听器附加到 DOM 的过程，使静态 HTML 具有交互性。在底层，水合是通过 React 的 hydrateRoot API 完成的。

后续导航

在后续导航中，客户端组件完全在客户端渲染，无需服务器渲染的 HTML。

这意味着需要下载并解析客户端组件的 JavaScript 包。一旦包准备就绪，React 将使用 RSC Payload 来协调客户端和服务器组件树，并更新 DOM。

回到服务器环境

有时，在声明了 "use client" 边界之后，你可能想要回到服务器环境。例如，你可能想要减小客户端包的大小，在服务器上获取数据，或使用仅在服务器上可用的 API。

即使代码理论上嵌套在客户端组件内，你也可以通过交错使用客户端组件和服务器组件以及服务器操作来将代码保留在服务器上。请参阅组合模式页面了解更多信息。