title: 组件开发

组件开发

Next.js 16 支持 Server Components 和 Client Components 两种组件类型。

Server Components（默认）

在 App Router 中，所有组件默认都是 Server Components：

// app/components/ProductList.tsx
async function ProductList() {
  // 可以直接在组件中获取数据
  const products = await fetch('https://api.example.com/products').then(r => r.json())
  
  return (
    <ul>
      {products.map(product => (
        <li key={product.id}>{product.name}</li>
      ))}
    </ul>
  )
}

export default ProductList

优势：

• 直接访问后端资源（数据库、文件系统）
• 减少客户端 JavaScript 体积
• 提升首屏加载速度

Client Components

当需要交互性时，使用 "use client" 指令：

'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)}>
        增加
      </button>
    </div>
  )
}

使用场景：

• 需要使用状态（useState、useReducer）
• 需要使用浏览器 API
• 需要事件处理器（onClick、onChange 等）
• 需要使用 Effect（useEffect、useLayoutEffect）

组件组合

Server Components 和 Client Components 可以组合使用：

// app/page.tsx (Server Component)
import ClientCounter from './ClientCounter'

export default function Page() {
  return (
    <div>
      <h1>服务端组件页面</h1>
      <ClientCounter /> {/* Client Component */}
    </div>
  )
}

最佳实践

1. 默认使用 Server Components：除非需要交互性
2. 将 Client Components 放在组件树的叶子节点
3. 通过 props 传递数据：从 Server 到 Client Components
4. 避免不必要的客户端代码：减少包体积

小结

理解 Server Components 和 Client Components 的区别是掌握 Next.js 16 的关键！