React Server Components
React Server Components (RSC), EK, NAYA, COMPONENT, TYPE, hai (Next.js, App Router, mein, DEFAULT) — SERVER, PAR, RENDER, HOTE, HAIN, aur, UNKA, JavaScript, CODE, CLIENT, (BROWSER) KO, KABHI, BHEJA, HI, NAHI, JAATA — SIRF, RESULT, (HTML/DATA) BHEJA, JAATA, hai.
"use client" DIRECTIVE, EK, FILE, KE, TOP, PAR, LAGAКE, USE, EXPLICITLY, "Client Component" MARK, KIYA, JAATA, hai — INTERACTIVITY, (onClick, useState) CHAHIYE, TO, Client Component, ZAROORI, hai. Server Components, DEFAULT, HAIN, aur, BUNDLE, SIZE, KAAFI, KAM, KAR, SAKTE, HAIN.
// Server Component (default) — DIRECTLY, database, access, kar, sakta hai:
async function ProductList() {
const products = await db.query("SELECT * FROM products"); // server-only
return (
<ul>
{products.map(p => <li key={p.id}>{p.name}</li>)}
</ul>
);
}
// Client Component — interactivity, ke, liye:
"use client";
function LikeButton() {
const [liked, setLiked] = React.useState(false);
return <button onClick={() => setLiked(!liked)}>{liked ? "❤️" : "🤍"}</button>;
}- Server Components = server, PAR, render, HOTE, HAIN — JS, code, client, ko, NAHI, jaata
- "use client" = EXPLICITLY, Client, Component, mark, karta hai (interactivity, ke, liye)
- Bundle, size, KAAFI, KAM, HO, sakta hai — Next.js, App, Router, mein, DEFAULT
Server, Components, mein, window, document, localStorage, jaise, BROWSER, APIs, USE, NAHI, HO, SAKTE — WOH, SERVER, PAR, RUN, HOTE, HAIN, JAHA, YE, APIs, EXIST, HI, NAHI, KARTE. Interactivity, aur, BROWSER, APIs, KE, LIYE, "use client" ZAROORI, hai.
EK, Server, Component, EK, Client, Component, KO, RENDER, KAR, SAKTA, hai (props, PASS, KARKE), 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.
// Server Component:
function Page() {
return <ClientWrapper><ServerContent /></ClientWrapper>;
}
// ClientWrapper (client component), ServerContent, ko, children, ki, tarah, RECEIVE, karta hai