Composition Patterns
Server, Component, EK, Client, Component, ko, RENDER, kar, sakta hai (props, PASS, karके) — LEKIN, ULTA, NAHI — EK, Client, Component, DIRECTLY, EK, Server, Component, IMPORT, NAHI, kar, sakta.
Server, Components, ko, children, ki, tarah, Client, Components, mein, PASS, kiya, ja, sakta hai — YE, "SLOT" PATTERN, EK, Client, Component, (jaise, EK, MODAL, WRAPPER) ko, Server, Component, CONTENT, RENDER, karne, deta hai, bina, USE, "use client" mein, CONVERT, kiye.
// ClientWrapper.js ("use client"):
"use client";
export default function ClientWrapper({ children }) {
const [open, setOpen] = useState(false);
return open ? <div>{children}</div> : null;
}
// page.js (server component):
export default function Page() {
return (
<ClientWrapper>
<ServerContent /> {/* server component, children, ki, tarah, PASS, hua */}
</ClientWrapper>
);
}- Server component, Client component, ko, render, kar, sakta, hai (props, se) — ULTA, nahi
- Server components, ko, children, ki, tarah, Client, components, mein, PASS, kiya, ja, sakta, hai
- "Server components as children" pattern, EXTREMELY, powerful, hai
Server, Components, DATA, fetch, karके, USE, PROPS, ke, roop, mein, Client, Components, ko, PASS, kar, sakte, HAIN — YE, EK, COMMON, PATTERN, hai, jab, EK, Client, Component, ko, DATA, PLUS, INTERACTIVITY, DONO, chahiye.
export default async function Page() {
const data = await getData();
return <InteractiveChart data={data} />; // "use client", ANDAR, hai
}Server, se, Client, Component, ko, PASS, kiye, jaane, waale, PROPS, SERIALIZABLE, HONE, CHAHIYE (functions, DATES, YA, CLASS, instances, DIRECTLY, PASS, NAHI, ho, sakte) — YE, RSC, (React, Server, Component), boundary, ki, EK, LIMITATION, hai.