如果我通过 Children 属性将服务器组件传递给客户端组件，它会在客户端上渲染吗？

Question

在 NextJS 文档中，这里说导入到客户端组件的所有子组件和模块都被视为客户端包的一部分。然而，文档还说，您可以通过将服务器组件作为子属性传递给客户端组件来交错服务器/客户端组件，以便在服务器上渲染服务器组件，例如

<ClientComponent>
   <ServerComponent/>
</ClientComponent>

我不明白这些陈述之间的区别或结论到底是什么，因为这两部分似乎相互矛盾。我是否误解了一些术语？客户端组件的子组件是客户端包的一部分还是在服务器上呈现？

Answer 1

在这种情况下，

ServerComponent

将不会成为客户端捆绑包的一部分，它将在服务器上呈现（因此您只能访问服务器端功能，例如 ORM）。

他们在文档的这一部分中讨论过它：

支持以下模式。您可以将服务器组件作为道具传递给客户端组件。

一种常见的模式是使用 React

children

属性在客户端组件中创建一个“槽”。

在下面的示例中，

<ClientComponent>

接受

children

属性：

'use client'
 
import { useState } from 'react'
 
export default function ClientComponent({ children }) {
  const [count, setCount] = useState(0)
 
  return (
    <>
      <button onClick={() => setCount(count + 1)}>{count}</button>
 
      {children}
    </>
  )
}

<ClientComponent>

不知道

children

最终会被服务器组件的结果填充。

<ClientComponent>

唯一的责任是决定

children

最终将被放置在哪里。

在父服务器组件中，您可以导入

<ClientComponent>

和

<ServerComponent>

并将

<ServerComponent>

作为

<ClientComponent>

的子组件传递：

// This pattern works:
// You can pass a Server Component as a child or prop of a
// Client Component.
import ClientComponent from './client-component'
import ServerComponent from './server-component'
 
// Pages in Next.js are Server Components by default
export default function Page() {
  return (
    <ClientComponent>
      <ServerComponent />
    </ClientComponent>
  )
}