React Server Components ni nini na zinatofautiana vipi na client components?

Question

Accepted Answer

**Server Components (RSC)** huenderezwa kwenye **seva** na kutuma matokeo ya serialized kwenye kivinjari. Hutuma **sifuri JavaScript** kwa ajili yao wenyewe — data/markup tu, si msimbo wao. ## Aina mbili ```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 ; } ``` ## Uwezo na vizuizi | | Server Component | Client Component | |---|---|---| | Inaweza `await` / kutafuta data moja kwa moja | ✅ | ❌ | | Fikiri rasilimali za seva/siri | ✅ | ❌ | | `useState`/`useEffect`/matukio | ❌ | ✅ | | Hutuma JS kwenye kivinjari | ❌ (sifuri) | ✅ | ## Kwa nini inakusudiwa - **JavaScript chini ya mteja** → mizigo ya haraka na mujibu. - **Kutafuta data karibu na chanzo** (hakuna API round-trip kutoka kwa kivinjari, hakuna kufichua DB credentials). - Unaitumia **huweka** zinazo: seva components huendereza client components kwa interactive "visiwa." seva component inaweza kuendereza client moja, lakini **si** kinyume. ## Kapuri Props iliyopitishwa katika seva→mteja mpaka lazima iwe **serializable** — huwezi kupitisha kazi au class instances. RSC inabadilisha mtazamo wa akili kutoka "kila kitu kinajifanya katika kivinjari" hadi "endereza kwenye seva kwa default, chagua kwenye mteja mahali tu unahohitaji mujibu."

	Server Component	Client Component
Inaweza `await` / kutafuta data moja kwa moja	✅	❌
Fikiri rasilimali za seva/siri	✅	❌
`useState`/`useEffect`/matukio	❌	✅
Hutuma JS kwenye kivinjari	❌ (sifuri)	✅