next 项目中的 'use client' 是什么意思

大家好，我是1024小神，技术群 / 私活群 / 股票群 或 交朋友 都可以私信我。 如果你觉得本文有用，一键三连 (点赞、评论、关注)，就是对我最大的支持~

在 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(() => {
    // 访问浏览器 API
    const 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 API
    navigator.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>
  )
}

最佳实践

1. 只在必要时使用：尽量使用服务端组件，减少客户端 bundle 大小
2. 放在文件顶部：必须是文件的第一行代码
3. 作用范围：会应用到该文件导入的所有子组件
4. 合理拆分：将交互性部分提取到客户端组件，非交互部分保留为服务端组件

// 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 的核心特性之一，它帮助开发者明确组件的渲染环境，优化应用性能。
大家好，我是1024小神，技术群 / 私活群 / 股票群 或 交朋友 都可以私信我。 如果你觉得本文有用，一键三连 (点赞、评论、关注)，就是对我最大的支持~