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

Question

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

<ClientComponent>
   <ServerComponent/>
</ClientComponent>

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

Answer 1

由于它作为 prop （children特别是）传递给ClientComponent，ServerComponent因此不会成为客户端捆绑包的一部分。可以肯定的是，尝试使用useStateinServerComponent而不"use client"在顶部添加。

当他们说“通过"use client"在文件中定义 a ，导入到其中的所有其他模块（包括子组件）都被视为客户端捆绑包的一部分”时，他们谈论的是import位于顶部并在组件主体中使用的模块。不是作为传递的东西props。

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

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

一个常见的模式是使用 Reactchildren prop 在客户端组件中创建一个“槽”。

在下面的示例中，<ClientComponent>接受一个childrenprop：

'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>
  )
}