freeCodeCamp.org
·
如何在 Next.js 中共享服务器和客户端组件
💡
原文英文，约2200词，阅读约需8分钟。
📝
内容提要
Next.js App Router将应用分为服务器组件和客户端组件，服务器组件在服务器上运行以保护敏感信息，客户端组件在浏览器中处理交互。本文介绍了在两者之间共享数据和组件的方法，包括属性传递和上下文共享，以实现高效的数据管理和交互。
🎯
关键要点
- 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，同时保持所需的交互性。
❓
延伸问答
Next.js 中服务器组件和客户端组件有什么区别？
服务器组件在服务器上运行，保护敏感信息，而客户端组件在浏览器中处理交互。
如何在 Next.js 中从服务器组件向客户端组件传递数据？
可以通过 props 将数据从服务器组件传递给客户端组件，确保传递的 props 是可序列化的。
在 Next.js 中，如何使用上下文共享数据？
可以结合客户端组件的上下文提供者和 React.cache 来共享数据，React.Context 不能在服务器组件中使用。
如何防止在客户端组件中意外导入服务器专用代码？
可以使用 server-only 和 client-only 包来防止在客户端组件中导入服务器专用代码。
在 Next.js 中，如何处理第三方组件的使用？
如果第三方组件没有 'use client' 指令，需要将其包装在自己的客户端组件中。
为什么要将服务器组件放在树的顶部？
将服务器组件放在树的顶部可以减少发送到浏览器的 JavaScript，同时保持所需的交互性。
➡️
