React Server Components (RSC) a dhéanann ar an bhfreastalaí amháin — ní chuirtear a JavaScript ar an bhrowser riamh. San App Router, is Server Component an réamhshocrú do gach comhpháirt; braitheann tú isteach go soiléir ar iompar an chliaint.
db ;
() {
users = db..();
(
);
}
Is féidir le Server Components a bheith async, await sonraí go díreach, agus rochtain a fháil ar acmhainní ach ar an bhfreastalaí (bunachar sonraí, córas comhad, rúnda) — toisc go bhfeidhmíonn siad ar an bhfreastalaí. Níl gá le sraith API chun sonraí a fhógairt, agus ní bhraithfidh rúnda an cliant.
Faigheann an browser an HTML/UI dhréachtaithe, ní chód an chomhpháirt ná a spréacharnais. Cuireann Server Component a úsáideann leabharlann throm marcdown nó dáta aon cheann den leabharlann sin ar an browser — ag laghdú an mhéid bundle go géarchéimneach.
// ❌ 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
Nios feidhmeachtas, stát, iarmhairt, ná APIanna browser — is gá dóibh sin Client Component.
// 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 <><Article post={post} /><LikeButton postId={id} /></>;
}
An patrún: Server Components a thuigeann sonraí/struchtúr; leathnaigh Client Components ach nuair a bhíonn gá do fheidhmeachtas ("oileáin").
Is gné shainithe an App Router iad Server Components.
Baineann siad laghdú ar mhéid bundle an chliaint (níos lú JS a íoslódáil/a pharsáil), ceadaíonn rochtain dhíreach, slán ar thaobh an fhreastalaí ar shonraí gan API, agus feabhsaíonn siad feidhmíocht agus SEO.
Is rud bunúsach a bheith ar an eolas go bhfuil siad ann agus cad a dhéanann comhpháirt a bheith ina Client Component — tá sé sin riachtanach chun aplacháid App Router a struchtúrú go héifeachtach.