如何在 Next.js 中共享服务器和客户端组件

Next.js App Router将应用分为服务器组件和客户端组件，服务器组件在服务器上运行以保护敏感信息，客户端组件在浏览器中处理交互。

服务器组件默认在Next.js App Router中运行，能够从数据库获取数据，使用API密钥，并将敏感逻辑保留在服务器上。

客户端组件可以在服务器和客户端上运行，使用useState、useEffect等浏览器API，必须在文件顶部标记为'use client'。

服务器组件可以导入和渲染客户端组件，但客户端组件不能直接导入服务器组件，只能通过props接收。

通过props传递数据是服务器组件与客户端组件之间共享数据的最简单方法。

可以将服务器组件作为子组件传递给客户端组件，客户端组件接收的是渲染后的输出，而不是组件代码。

从服务器组件传递给客户端组件的props必须是可序列化的，包括字符串、数字、布尔值、数组和普通对象。

服务器动作可以作为props传递给客户端组件，并通过引用序列化，而不是值。

React Context不能在服务器组件中使用，可以结合客户端组件的上下文提供者和React.cache进行数据共享。

使用第三方组件时，如果它们没有'use client'指令，需要将其包装在自己的客户端组件中。

使用server-only和client-only包来防止在客户端组件中意外导入服务器专用代码。

共享组件和数据的模式包括通过props传递数据、将服务器组件作为子组件传递、使用可序列化的props、结合上下文和React.cache等。

保持服务器组件在树的顶部，将客户端组件推向叶子节点，以减少发送到浏览器的JavaScript，同时保持所需的交互性。