next.js 服务器组件/客户端组件 嵌套规则

一、先记住 3 条铁律（官方规则）

1. 服务端组件 (Server Component) = 默认，没有 'use client'
2. 客户端组件 (Client Component) = 顶部写了 'use client'
3. 服务端组件 会在服务器渲染；客户端组件 会在浏览器渲染

二、组件嵌套终极规则（无遗漏）

1. 服务端组件里可以放什么？
   全都可以放！

• 放 服务端组件
• 放 客户端组件

这是最常用、最推荐的结构：

// 父：服务端组件
import ServerChild from './ServerChild';
import ClientChild from './ClientChild';

export default function Page() {
  return (
    <div>
      <ServerChild />   {/* 没问题 */}
      <ClientChild />   {/* 没问题 */}
    </div>
  );
}

2.客户端组件里可以放什么？
只能放 客户端组件，不能放 服务端组件(直接写会报错/失效)

错误写法

'use client'; // 客户端组件
import ServerChild from './ServerChild';

export default function ClientPage() {
  return (
    <ServerChild />  // ❌ 不允许！
  );
}

三、那我非要在客户端组件里用服务端组件怎么办？
正确方案：作为 children / props 传进去，这是官网唯一允许的方式！
示例：

// 父：服务端组件
import ClientLayout from './ClientLayout';
import ServerChild from './ServerChild';

export default function Page() {
  return (
    // 把服务端组件当作 children 传给客户端组件
    <ClientLayout>
      <ServerChild /> 
    </ClientLayout>
  );
}

// 子：客户端组件
'use client';

export default function ClientLayout({ children }) {
  return <div>{children}</div>; // ✅ 完美运行
}

原理：

• <ServerChild /> 是在服务端渲染好的
• 再把渲染结果传给客户端组件
• 客户端组件只负责展示，不负责渲染服务端组件

四、一张表彻底记住（无遗漏版）

image.png