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?
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.