将服务器组件作为 Props 传递给客户端组件是否会使服务器组件成为客户端组件？

Question

这里我们有

root

组件，比方说

app.tsx

，它调用

CSR

组件并作为子

SSR

组件传递

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

export default App;

"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)}) />
    {children}
  );
};

export default CSRComp;

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

export default SSRComp;

是

CSRComp

使得

SSRComp

CSR

因为它本身就是

CSR

？

SSRComp

应该还是留下

SSR

吧？

Answer 1

否，服务器组件将在服务器上渲染。

文档解释：

通过这种方法， 解耦并且可以独立渲染。在这种情况下，孩子 可以在服务器上渲染，早于 渲染在客户端上。

完整文档在这里