在React Server Component中映射数组时是否仍需使用key prop？

问题描述 #

我原本认为React Server Components（RSC）中映射数组生成元素时不需要添加key prop，毕竟RSC仅在服务器端渲染一次，但为了确保准确，想确认这个结论是否正确并获取依据。

先回顾常规场景：在React客户端组件中，为映射生成的每个元素添加key prop是最佳实践（若未添加，React会发出警告）——这是因为key能帮助React在数组变化时确定需要更新/移除的元素。

但针对仅在服务端单次渲染的RSC，是否仍有必要添加key prop？

更新
现在我开始认为确实有必要。升级到最新版本的Next.js和React后，我遇到了如下错误：

Uncaught Error: Cannot access XXX.prototype on the server. You cannot dot into a client module from a server component. You can only pass the imported name through.

其中XXX是我正在映射的组件名称，为这些组件添加key prop后，错误立即消失了。

回答 #

结论：React Server Components 映射数组时仍需要添加key prop #

• 避免运行时错误
  正如你遇到的情况，当在RSC中映射客户端组件时，缺少key会触发React/Next.js的模块隔离校验错误。这是因为没有key时，React的渲染逻辑会尝试以不符合RSC模块规则的方式访问客户端组件的内部属性（如prototype），而添加key后，渲染逻辑会正确按组件引用传递，规避这类错误。

• 适配未来渲染逻辑变化
  虽然当前RSC以服务器端单次渲染为主，但React的迭代可能会为RSC引入增量更新、渲染结果复用等特性。提前添加key能让代码更健壮，无需在后续功能更新时返工修改。

• 保持编码一致性
  在所有数组映射场景（无论客户端还是服务器组件）统一添加key，能养成稳定的编码习惯，避免在不同组件类型间切换时因遗漏key引发问题。

内容的提问来源于stack exchange，提问作者gfpacheco