reactjsnext.jsnested

Is passing Server Components to Client Components as Props makes Server components a client component?


here we have root component, let's say app.tsx, that calls CSR component and pass as child SSR component

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;

is CSRComp makes SSRComp CSR because it itself is a CSR?

SSRComp should still stay SSR, right?


Solution

  • The server component will be rendered on the server.

    Documentation explains:

    With this approach, ClientComponent and ServerComponent are decoupled and can be rendered independently. In this case, the child ServerComponent can be rendered on the server, well before ClientComponent is rendered on the client.

    Complete documentation here