Pira Server Components ing App Router?

Question

Accepted Answer

**React Server Components (RSC)** nggawe kasil **mung ing server** — JavaScript ora kambuh menyang browser. Ing App Router, saben komponene Server Component **secara default**; sampeyan kudu milih perilaku klien kanthi eksplisit. ## Apa sing bisa ditindakake Server Component ```tsx // app/users/page.tsx — a Server Component (no "use client") import db from "@/lib/db"; export default async function Users() { const users = await db.user.findMany(); // ✅ direct DB access, runs on server return (

{u.name}

); } ``` Server Components bisa **async**, `await` data langsung, lan ngakses resource server-only (database, filesystem, secrets) — marga mbukak ing server. Ora perlu lapisan API kanggo njupuk data, lan secrets ora tau tekan client. ## Manfaat gedhe: zero client JS kanggo komponene Browser nampa **HTML/UI sing wis dijumbuhi**, ora kode komponene utawa dependensine. Server Component sing ngenggo perpustakaan markdown utawa tanggal sing abot ora ngirim **apa-apa** saka perpustakaan kasebut menyang browser — nyuda ukuran bundle kanthi drastis. ## Apa sing ORA bisa ditindakake Server Components ```tsx // ❌ these only work in Client Components useState, useEffect, useRef // hooks (no interactivity/state on the server) onClick, onChange // event handlers window, localStorage, document // browser-only APIs ``` Ora ana interaktivitas, state, effects, utawa browser APIs — perlu Client Component. ## Nggabung server lan klien ```tsx // Server Component fetches data, passes it to an interactive Client Component import LikeButton from "./LikeButton"; // a "use client" component export default async function Post({ id }) { const post = await getPost(id); // server-side fetch return <>

; } ``` Pola: Server Components nangani data/struktur; ngisi Client Components mung kang interaktivitas dibutuhake ("islands"). ## Mulai penting Server Components minangka fitur panentoka App Router. Mengurangi ukuran bundle klien (JS sing luwih sedikit kanggo download/parse), ngidini akses data server-side sing aman langsung tanpa API, lan nambahi performa lan SEO. Mengetahui yen iku default — lan apa sing pasak komponene kanggo Server Component — iku fundamental kanggo nggawe App Router apps kanthi efisien.