next 项目中的 ‘use client‘ 是什么意思
在 Next.js 项目中，'use client' 是一个指令（directive），用于标记一个模块及其导入的子组件为客户端组件（Client Component）。
基本概念
服务端组件（Server Components） - 默认
- 在服务器上渲染
- 不会发送到客户端
- 可以直接访问后端资源
- 默认情况下所有组件都是服务端组件
客户端组件（Client Components） - 需要 'use client'
- 在客户端渲染
- 可以处理交互性和状态
- 可以使用浏览器 API
使用场景
需要在组件中使用以下功能时，必须添加 'use client'：
'use client'import { useState, useEffect } from 'react'export default function Counter() {const [count, setCount] = useState(0)useEffect(() => {// 访问浏览器 APIconst timer = setInterval(() => {setCount(c => c + 1)}, 1000)return () => clearInterval(timer)}, [])return (<div><h1>计数器: {count}</h1><button onClick={() => setCount(count + 1)}>点击</button></div>)
}
具体使用情况
1. 状态和交互
'use client'
import { useState } from 'react'function InteractiveComponent() {const [value, setValue] = useState('')return (<input value={value} onChange={(e) => setValue(e.target.value)}/>)
}
2. 生命周期和副作用
'use client'
import { useEffect } from 'react'function DataFetcher() {useEffect(() => {// 客户端数据获取fetch('/api/data').then(res => res.json()).then(console.log)}, [])return <div>数据加载组件</div>
}
3. 浏览器 API
'use client'
function LocationDisplay() {const [location, setLocation] = useState(null)useEffect(() => {// 使用浏览器 geolocation APInavigator.geolocation.getCurrentPosition((position) => setLocation(position))}, [])return <div>位置信息</div>
}
4. 事件处理
'use client'
function FormComponent() {const handleSubmit = (e) => {e.preventDefault()// 处理表单提交}return (<form onSubmit={handleSubmit}><button type="submit">提交</button></form>)
}
最佳实践
- 只在必要时使用：尽量使用服务端组件，减少客户端 bundle 大小
- 放在文件顶部：必须是文件的第一行代码
- 作用范围：会应用到该文件导入的所有子组件
- 合理拆分：将交互性部分提取到客户端组件，非交互部分保留为服务端组件
// Server Component (默认)
import ClientComponent from './ClientComponent'export default function Page() {// 服务端数据获取const data = await fetchData()return (<div><h1>服务端渲染的内容</h1><ClientComponent data={data} /></div>)
}
'use client' 是 Next.js App Router 的核心特性之一，它帮助开发者明确组件的渲染环境，优化应用性能。