深入理解 Next.js 服务端组件

什么是服务端组件？

React Server Components 允许组件在服务端渲染，并且永远不会在客户端执行。这意味着：

更小的包体积：服务端组件的依赖不会发送到客户端
直接访问后端资源：数据库、文件系统等
自动代码分割：每个组件都是独立的

// 这是一个服务端组件
async function BlogPost({ id }: { id: string }) {
  const post = await db.post.findUnique({ where: { id } });
  return (
    <article>
      <h1>{post.title}</h1>
      <div>{post.content}</div>
    </article>
  );
}

服务端组件 vs 客户端组件

特性	服务端组件	客户端组件
渲染位置	服务端	浏览器
交互性	不支持	支持
状态管理	不支持	支持 useState
副作用	不支持	支持 useEffect

何时使用客户端组件？

当你需要以下功能时，才需要使用客户端组件：

1. 事件处理（onClick, onChange 等）

2. 状态管理（useState, useReducer）

3. 副作用（useEffect）

4. 浏览器 API

最佳实践

1. 尽可能使用服务端组件

// ✅ 推荐：服务端组件获取数据
async function Page() {
  const data = await fetchData();
  return <ClientComponent data={data} />;
}

// ❌ 避免：客户端组件获取数据
function Page() {
  const [data, setData] = useState(null);
  useEffect(() => {
    fetchData().then(setData);
  }, []);
  return <div>{data}</div>;
}

2. 合理使用 'use client'

'use client';

import { useState } from 'react';

export function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(c => c + 1)}>{count}</button>;
}

性能优化建议

服务端组件可以大大减少客户端 JavaScript 体积，但需要注意数据获取的策略。

1. 并行数据获取：使用 Promise.all 而不是串行

2. 流式传输：利用 Suspense 实现渐进式加载

3. 缓存策略：合理使用 fetch 的 cache 选项

总结

服务端组件是 Next.js 未来发展的核心方向。理解并掌握它，对于构建高性能的 Web 应用至关重要。