Cad iad React Server Components agus conas a bhíonn siad difriúil ó chomhpháirteanna cliant?

Question

Accepted Answer

**Server Components (RSC)** a dhéanann gealadh ar an **bhfreastalaí** agus torthaí srathaithe a sheoladh go dtí an brabhsálaí. Ní sheolann siad **aon JavaScript** dóibh féin — ach an t-sonraí/markup, ní a gcód. ## An dá chineál ```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 ; } ``` ## Cumais agus srianta | | Server Component | Client Component | |---|---|---| | Is féidir `await` / sonraí a thabhairt isteach go díreach | ✅ | ❌ | | Rochtain a fháil ar acmhainní/rúnda an fhreastalaí | ✅ | ❌ | | `useState`/`useEffect`/imeachtaí | ❌ | ✅ | | JavaScript á sheoladh go dtí an brabhsálaí | ❌ (nialas) | ✅ | ## Cén fáth a bhíonn sé tábhachtach - **Níos lú JavaScript ar an gcliant** → uachtar níos tapa agus idirghníomhaíocht. - **Sonraí a thabhairt isteach in aice leis an bhfoinse** (gan aistir API ó bhreabhsálaí, gan créideasúna DB a nochtadh). - Is féidir leo a **chomhdhéanamh**: déanann comhpháirteanna freastalaí comhpháirteanna cliant a dhéanann gealadh do na "oileáin" idirghníomhaithe. Is féidir le comhpháirt fhreastalaí ceann a dhéanamh ar an gcliant, ach **ní** ar ais. ## Gotcha Caithfidh a bheith **in-srathaithe** na props atá passáilte thar an spréacharnach freastalaí→cliant — ní féidir le tú feidhmeanna ná samhlacha clás a roinnt. Athraíonn RSC an múnla meabhrach ó "gach rud a rith sa bhrabhsálaí" go "gealadh ar an bhfreastalaí de réir réamhshocrú, opt isteach go dtí an cliant go huachtar ansin a bhíonn tú i ngeall ar idirghníomhaíocht.

	Server Component	Client Component
Is féidir `await` / sonraí a thabhairt isteach go díreach	✅	❌
Rochtain a fháil ar acmhainní/rúnda an fhreastalaí	✅	❌
`useState`/`useEffect`/imeachtaí	❌	✅
JavaScript á sheoladh go dtí an brabhsálaí	❌ (nialas)	✅