如何在客户端组件中使用服务器组件？

Question

我想在客户端组件中使用服务器组件。 当我在父组件中使用 use client 时，所有子组件都会转换为客户端组件，我想在父客户端组件中渲染服务器组件，这可能与否。

我想在服务器中渲染一些组件，但是当在客户端组件中使用服务器组件时，所有服务器组件都会在客户端渲染。但我需要从服务器端渲染:?

有人尝试过这样的事情吗？ 或者他实施了类似的事情？

Answer 1

您无法在客户端组件中导入服务器组件 - 引用 Next.js 文档

不支持以下模式。您无法将服务器组件导入客户端组件

但是，您可以通过

children

属性将服务器组件接受为子组件。来自文档

的示例

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

组件将独立渲染。