Server Components作为Props/子组件传入Client Components会转为客户端组件吗？

代码示例 #

根组件（app.tsx） #

const App = () => {
  return (
    <CSRComp>
      <SSRComp />
    </CSRComp>
  );
};

export default App;

客户端组件（CSRComp.tsx） #

"use client"
import { useState } from "react";

const CSRComp = ({ children }) => {
  const [count, setCount] = useState(0);

  return (
    <>
      <p>Client side component</p>
      <p>{count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      {children}
    </>
  );
};

export default CSRComp;

服务端组件（SSRComp.tsx） #

const SSRComp = () => {
  return (
    <p>Server side component</p>
  );
};

export default SSRComp;

疑问解答 #

1. 将Server Components作为Props传入Client Components会使其变为客户端组件吗？ #

不会。把服务端组件作为children（本质是props的一种）传给客户端组件时，服务端组件依然在服务器端完成渲染，生成的静态内容会传递给客户端组件，客户端组件仅负责渲染这些内容，不会改变服务端组件的执行环境和属性。

2. 上述代码中的SSRComp会因被CSRComp作为子组件包裹而转为CSR组件吗？SSRComp是否仍应保持Server组件的属性？ #

SSRComp不会转为客户端组件，它依然保持服务端组件的所有属性。

React的渲染逻辑里，App作为默认的服务端组件，会先在服务器端渲染SSRComp，将其输出内容作为children传递给CSRComp；之后CSRComp在客户端渲染时，只是把接收到的children内容插入自身DOM结构中。整个过程中SSRComp始终在服务器端执行，不会被打包进客户端JS bundle，也不会在客户端运行。

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