在Next.js 13中克隆作为props传入的React Server Components是否抵消性能优势？

结论先行 #

用cloneElement给作为props传入客户端组件的服务端组件添加onClick这类事件处理函数，不会导致服务端组件在客户端重渲染，也不会抵消其性能优势。

核心原因 #

1. 服务端组件的渲染本质
   服务端组件（RSC）在服务端完成渲染，最终以序列化的React节点（RSC Payload）形式传递给客户端。客户端拿到的是已经渲染好的静态UI片段，不会重新执行服务端组件的代码逻辑——包括数据获取、组件内部计算等都只在服务端发生一次。

2. cloneElement的作用范围
   cloneElement是客户端React的API，它的作用是在客户端对已有的React元素（这里就是服务端传来的静态UI节点）进行浅拷贝并添加/修改props。这个操作仅在客户端的React渲染层完成，不会触发服务端组件的重新渲染，也不会把服务端组件转化为客户端组件。

3. 性能优势的保留
   服务端组件的核心性能优势在于：组件代码不打包到客户端、数据在服务端就近获取、减少客户端JS体积。只要你没有给服务端组件添加"use client"指令，也没有让它依赖客户端专属API（比如window、useState），仅仅通过cloneElement添加事件处理，这些优势都会完整保留。

示例验证 #

假设我们有一个服务端组件：

// components/ServerComp.js（无"use client"，默认是服务端组件）
export default function ServerComp() {
  // 这里的代码仅在服务端执行
  console.log("ServerComp running on server");
  return <div>Server-rendered content</div>;
}

然后是客户端的HOC包装器：

// components/withClick.js（必须加"use client"，因为要处理客户端交互）
"use client";
import { cloneElement } from "react";

export default function withClick({ children }) {
  return cloneElement(children, {
    onClick: () => {
      console.log("Clicked on client");
    },
  });
}

在页面中使用：

// app/page.js
import ServerComp from "@/components/ServerComp";
import withClick from "@/components/withClick";

export default function Home() {
  return (
    <div>
      <withClick>
        <ServerComp />
      </withClick>
    </div>
  );
}

• 运行后，"ServerComp running on server"只会在服务端控制台打印，客户端不会出现。
• 点击元素时，客户端控制台会打印"Clicked on client"，说明事件绑定成功，且服务端组件没有在客户端重新执行。

注意事项 #

• 确保HOC本身是客户端组件（添加"use client"），因为事件处理是客户端逻辑，必须在客户端执行。
• 不要通过cloneElement给服务端组件添加依赖客户端状态/API的props（比如把useState的状态传给服务端组件），这会导致React报错，因为服务端组件无法访问客户端状态。

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