如何在Client Component中使用Server Component并保持服务端渲染？

完全可行，这是Next.js App Router设计里的核心能力之一，专门用来解决客户端交互组件和服务端数据组件混合渲染的场景。

实现规则与方法 #

• 核心限制：Client Component不能直接导入Server Component，但可以通过「父级Server Component传递组件」或者「在Client Component的子节点位置直接渲染」的方式嵌入——App Router会自动处理组件边界的拆分，保证Server Component仍在服务端完成渲染。
• 具体步骤：
  1. 定义独立的Server Component：不要加"use client"指令，里面可以直接写服务端专属逻辑（比如fetch数据、访问数据库）。
  2. 通过顶层Server Component（比如默认的page.tsx）同时导入Client Component和Server Component，把Server Component作为子节点或props传给Client Component。

实践案例：带交互的统计仪表盘 #

比如做一个有侧边栏折叠功能的用户统计仪表盘：

1. Server Component：统计卡片

// AnalyticsCard.tsx - 无"use client"，默认是Server Component
export default async function AnalyticsCard() {
  // 服务端直接请求数据，不会暴露给客户端
  const stats = await fetch('/api/user-stats', { cache: 'force-cache' }).then(res => res.json());
  
  return (
    <div className="card">
      <h3>用户访问统计</h3>
      <p>总访问量：{stats.totalVisits}</p>
      <p>今日新增用户：{stats.todayNewUsers}</p>
    </div>
  );
}

2. Client Component：仪表盘外壳（带交互）

'use client';
// DashboardShell.tsx - 客户端组件，负责交互逻辑
import { useState } from 'react';

export default function DashboardShell({ children }: { children: React.ReactNode }) {
  const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
  
  return (
    <div className="dashboard-layout">
      <button onClick={() => setSidebarCollapsed(!sidebarCollapsed)}>
        {sidebarCollapsed ? '展开侧边栏' : '收起侧边栏'}
      </button>
      <aside className={sidebarCollapsed ? 'collapsed' : ''}>导航菜单</aside>
      <main>{children}</main> {/* 这里渲染传入的Server Component */}
    </div>
  );
}

3. 顶层Server Component：页面入口

// page.tsx - 默认是Server Component，作为入口整合两个组件
import DashboardShell from './DashboardShell';
import AnalyticsCard from './AnalyticsCard';

export default async function DashboardPage() {
  return (
    <DashboardShell>
      <AnalyticsCard /> {/* 直接在Client Component的子节点中渲染Server Component */}
    </DashboardShell>
  );
}

为什么这能工作？ #

Next.js会在渲染阶段自动拆分组件边界：Server Component的HTML会在服务端生成，然后嵌入到Client Component的渲染结果中。客户端只需要加载Client Component的交互逻辑，Server Component的内容不需要在客户端重新渲染，完全保留服务端渲染的优势。

内容的提问来源于stack exchange，提问作者Elliot