name: nextjs-server-components description: 使用Next.js服务器组件构建高效的React应用程序，这些组件在服务器上渲染，减少客户端包大小，提高性能，并允许直接数据库访问。使用场景包括服务器端获取数据、减少JavaScript包大小、在组件中直接访问数据库、使用Suspense实现流式渲染、创建只渲染一次的布局、优化核心网页指标，或使用服务器优先架构构建SEO友好的应用程序。

Next.js服务器组件 - React服务器组件模式

何时使用此技能

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

何时使用此技能

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

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

关键概念

服务器组件（在应用路由器中默认）：

仅在服务器上运行
可以直接访问数据库/API
零客户端JavaScript
支持异步/等待

客户端组件（‘use client’）：

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

组合模式

// ✅ 服务器组件获取数据
// 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>
  );
}

// ✅ 客户端组件处理交互性
// app/ClientComponent.tsx
'use client';

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

将服务器组件作为子组件传递

// ✅ 客户端组件带有服务器组件子组件
'use client';

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

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

何时使用客户端组件

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

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

资源

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