Apa iku React Server Components lan apa bedane karo client components?

Question

Accepted Answer

**Server Components (RSC)** render ing **server** lan ngirim hasil serialisasi menyang browser. Dheweke ngirim **zero JavaScript** kanggo dheweke — mung data/markup, dudu code dheweke. ## Loro jenis ```jsx // Server Component (default in the Next.js App Router): async function ProductPage({ id }) { const product = await db.products.find(id); // fetch DIRECTLY on the server return ; // no client JS for this component } // Client Component — opt in for interactivity: "use client"; function AddToCart() { const [qty, setQty] = useState(1); // hooks/events need the client return ; } ``` ## Kapabilitas lan kendala | | Server Component | Client Component | |---|---|---| | Bisa `await` / fetch data langsung | ✅ | ❌ | | Akses server resources/secrets | ✅ | ❌ | | `useState`/`useEffect`/events | ❌ | ✅ | | Ngirim JS menyang browser | ❌ (zero) | ✅ | ## Apa sing penting - **Kurang client JavaScript** → loading lan interactivity luwih cepet. - **Data fetching cedhak sumber** (ora ana API round-trip saka browser, ora expose DB credentials). - Kowe **compose** dheweke: server components render client components kanggo "islands" interactive. Server component bisa render client siji, nanging **ora** vice-versa. ## Gotcha Props sing dilewati murni server→client boundary kudu **serializable** — kowe ora bisa ngirim functions utawa class instances. RSC ngubah mental model saka "kabeh running ing browser" dadi "render ing server secara default, opt ke client mung ing endi kowe kudu interactivity."

	Server Component	Client Component
Bisa `await` / fetch data langsung	✅	❌
Akses server resources/secrets	✅	❌
`useState`/`useEffect`/events	❌	✅
Ngirim JS menyang browser	❌ (zero)	✅