Next.js 系列之客户端组件（Client Components）和服务端组件（Server Components）的区别

前端2025年4月1日87 次阅读约 7 分钟

Next.js 中客户端组件（Client Components）和服务端组件（Server Components）的核心区别在于运行环境、功能特性及适用场景，以下是详细对比：

1. 运行环境与渲染方式

服务端组件

• 环境：仅在服务器端运行，生成静态 HTML 发送到客户端。

• 渲染：支持静态渲染（默认）、动态渲染（需调用 fetch 等 API）和流式渲染（分块加载内容）。

• 示例代码：直接获取数据并返回 HTML，无需客户端交互逻辑。

// 服务端组件示例：直接获取数据并生成静态 HTML
export default async function ServerComponent() {
  const data = await fetch('<https://api.example.com/data>');
  return <div>{data}</div>;
}

客户端组件

• 环境：在浏览器中运行，支持交互逻辑和浏览器 API（如 window、localStorage）。

• 渲染：首次加载时由服务端生成 HTML 预览，随后通过客户端 JavaScript 进行 Hydration（水合）以实现交互性。

• 示例代码：使用 useState 管理状态并响应用户操作。

'use client';
import { useState } from 'react';
export default function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}

2. 功能特性

特性	服务端组件	客户端组件
数据获取	可直接访问数据库、API 或敏感数据。	需通过客户端请求（如 `fetch`），数据可能暴露。
React Hooks	不支持 `useState`、`useEffect` 等。	支持所有 React Hooks。
浏览器 API	无法访问。	可访问 `window`、`document` 等。
性能优化	减少客户端 JS 体积，提升 SEO 和首屏加载速度。	增加客户端 JS 体积，但支持动态交互。
嵌套规则	可包含客户端组件。	不可嵌套服务端组件（仅能通过 Props 传递数据）。

3. 适用场景

服务端组件优先使用的情况：

• 静态内容展示（如博客文章、产品列表）。

• 需要直接访问数据库或敏感数据的场景。

• SEO 优化需求高的页面。

客户端组件优先使用的情况：

• 用户交互（如表单提交、按钮点击）。

• 动态状态管理（如购物车、计数器）。

• 依赖浏览器 API 的功能（如动画、地理位置）。

4. 混合使用与数据传递

组合方式：服务端组件可通过 Props 将数据传递给客户端组件。例如：

// 服务端组件（传递数据）
export default async function ServerParent() {
  const data = await fetchData();
  return <ClientChild data={data} />;
}

// 客户端组件（接收数据）
'use client';
export default function ClientChild({ data }) {
  const [filter, setFilter] = useState('');
  // 根据 data 进行过滤等操作
}