客户端中的服务器
本课属于 Coddy React 学习旅程的“Next.js 基础”单元。第 21 课，共 47 课。
几乎所有人都会弄错这条规则，而它决定了你能给服务器施加多大压力。
客户端组件不能导入服务器组件：导入服务器组件会使其跨越边界，也变成客户端代码。因此，人们会得出结论，认为交互式包装器中的所有内容都必须是客户端代码。这个结论是错的。
客户端组件可以渲染作为 children 传递给它的服务器端内容。
区别在于由谁负责渲染。当服务器页面写下这段代码时：
<Panel>
<Details />
</Panel>……服务器会渲染 <Details />，并将完成后的结果作为属性传给 Panel。Panel 从不导入它，也不会运行它，只负责决定把它放在哪里。对于客户端组件来说，children 是一段已经完成的界面。
这样，小型交互式外壳（标签栏、模态框、可折叠面板）就能封装大量仅在服务器上使用的内容，而不会把这些内容带到浏览器中。交互部分很精简，内容则留在服务器上。
记住这个模式：客户端包装器，服务器端填充内容。
挑战
中等components/Panel.jsx 是一个客户端组件（已锁定，请阅读）：它会渲染一个切换按钮，并且只会在打开时显示它的 children。
目前，页面把详情渲染在面板旁边，而不是面板内部，因此切换按钮不起作用。
- 在
app/page.jsx中，将<p id="details">移到<Panel>标签之间，作为它的子元素。 - 保持文本完全不变，并让
app/page.jsx保持为服务器组件：不要添加指令。
这个段落仍然会在服务器上渲染。客户端面板只负责决定是否显示它。
亲手试试
import './globals.css';
export const metadata = {
title: 'My App',
};
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
{children}
</body>
</html>
);
}
自我测试这节课包含一个小测验。开始学习即可作答，并记录你的进度。
