Next.js use client用法

"use client"; 是 Next.js 13+ App Router 中的一个指令，用来标记这个组件需要在客户端运行。

为什么需要它？

Next.js 13+ 的变化

Next.js 13 引入了 App Router，默认情况下所有组件都是服务器组件(Server Components)，在服务端预渲染。但有些功能必须在浏览器中执行：

• 交互事件 (onClick, onChange 等)
• 浏览器 API (window, document, localStorage 等)
• React Hooks (useState, useEffect, useContext 等)
• 第三方库 (如 echarts-for-react)

BaseChart 组件的情况

你的 BaseChart 组件需要 "use client"; 因为：

1. ECharts 需要 DOM：

   // echarts-for-react 需要在浏览器中操作 DOM 元素
   <ReactECharts echarts={echarts} option={option} />
   

2. 可能用到 React Hooks：

   // 如果组件内部使用了 useState, useEffect 等
   const [loading, setLoading] = useState(false);
   

3. 事件处理：

   // 图表的点击、悬停等事件需要在客户端处理
   const onEvents = {
     click: (params) => {
       /* 浏览器环境才能执行 */
     },
   };
   

对比说明

没有 "use client"（服务器组件）：

// ❌ 这样会报错，因为 echarts 无法在服务端运行
export default function ServerChart() {
  return <ReactECharts option={option} />; // 错误！
}

有 "use client"（客户端组件）：

"use client"; // ✅ 告诉 Next.js 这个组件要在浏览器中运行

export default function ClientChart() {
  return <ReactECharts option={option} />; // 正确！
}

什么时候需要？

需要 "use client"：

• 使用 React Hooks
• 处理用户交互 (点击、表单等)
• 使用浏览器 API
• 使用需要 DOM 的第三方库 (如 ECharts, 地图库等)

不需要 "use client"：

• 纯展示组件
• 数据获取和处理
• 静态内容渲染

总结： "use client"; 就是告诉 Next.js："这个组件不能在服务器上渲染，必须发送到浏览器中运行"。对于 ECharts 这样的可视化库来说，这是必需的。