name: nextjs-server-components description: 使用Next.js Server Components构建高效的React应用，这些组件在服务器端渲染，减少客户端包大小，提升性能，并允许直接数据库访问。当需要服务器端获取数据、减少JavaScript包大小、在组件中直接访问数据库、使用Suspense实现流式渲染、创建仅渲染一次的布局、优化Core Web Vitals，或构建具有服务器优先架构的SEO友好应用时使用。

Next.js Server Components - React Server Components模式

何时使用此技能

在Server Components中直接获取数据
减少客户端JavaScript包大小
无需API路由直接访问数据库
使用Suspense实现流式渲染
创建仅渲染一次且持久的布局
优化最大内容绘制（LCP）
构建SEO友好的服务器渲染应用
使用仅服务器代码（数据库查询、密钥）
实现服务器端数据转换
减少交互时间（TTI）
默认构建零客户端JS的应用
有效结合Server和Client Components

何时使用此技能

构建Next.js 13+应用，优化组件渲染，管理服务器/客户端边界。
当处理相关任务或功能时
在需要此专业知识的开发过程中

使用时机：构建Next.js 13+应用，优化组件渲染，管理服务器/客户端边界。

关键概念

Server Components（在App Router中默认）：

仅在服务器运行
可以直接访问数据库/API
零客户端JavaScript
支持async/await

Client Components（‘use client’）：

交互功能
浏览器API
React钩子（useState、useEffect等）

组合模式

// ✅ Server Component获取数据
// app/page.tsx
import { ClientComponent } from './ClientComponent';

export default async function Page() {
  const data = await fetchData(); // 服务器端
  
  return (
    <div>
      <h1>服务器渲染: {data.title}</h1>
      <ClientComponent initialData={data} />
    </div>
  );
}

// ✅ Client Component处理交互性
// app/ClientComponent.tsx
'use client';

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

传递Server Components作为子组件

// ✅ Client Component带有Server Component子组件
'use client';

export function ClientLayout({ children }: { children: React.ReactNode }) {
  const [isOpen, setIsOpen] = useState(false);
  
  return (
    <div>
      <button onClick={() => setIsOpen(!isOpen)}>切换</button>
      {isOpen && children}
    </div>
  );
}

// 用法 - 子组件可以是Server Components！
<ClientLayout>
  <ServerDataComponent /> {/* 保持在服务器端 */}
</ClientLayout>

何时使用Client Components

仅在需要时使用’use client’：

useState、useEffect、useContext
浏览器API（localStorage、window）
事件处理程序（onClick、onChange）
自定义钩子
使用React钩子的第三方库

资源

记住：默认保持组件在服务器端。仅在需要交互性时添加’use client’。