React 中服务器端组件如何与客户端组件通信？

Question

我正在使用 Next.js 并测试他们的新数据获取方式，但这也可能是一个常见的 React 18+ 问题，因为库本身正在转向客户端和服务器组件之间的区别。

假设我有这样的设置：

// page.tsx (server component)
export default function Home() {
  return (
    <>
      <Search /> {/* Search is a client component that tracks state for an input */}
      <ServerData /> {/* ServerData is a server component that gets the initial data */}
    </>
  )
}

由于Search跟踪input状态，我如何使用该值并对 进行客户端过滤器ServerData？

我尝试过的： Search可以是接受孩子道具的客户端组件。page.tsx可以重构，以便SearchData作为子项传递给 Search 并ServerData可以接受输入 prop。这可能行不通，因为我无法传递input到ServerDataasSearch只能将其理解为children。

Answer 1

服务器组件可以简单地将 props 传递给客户端组件。请注意，这些道具必须是可序列化的。例如，事件处理程序因此无法工作。

另请参阅： https: //nextjs.org/docs/app/building-your-application/rendering/composition-patterns#passing-props-from-server-to-client-components-serialization

从服务器传递到客户端组件的属性需要是可序列化的。这意味着函数、日期等值不能直接传递给客户端组件。