React Server Components (RSC) jirrenduraw biss fuq is-server — il-JavaScript tagħhom qatt ma jintbagħat il-browser. Fl-App Router, kull komponent hu Server Component b'default; int taħħal b'mod espliċitu fil-imġeba tal-kliyent.
db ;
() {
users = db..();
(
);
}
Server Components jistgħu jkunu async, await id-data direttament, u jaċċessaw ir-risorsi ta' server-only (databas, filesystem, sigrieti) — minħabba li jduru fuq is-server. Ebda livell ta' API mhuwiex meħtieġ biex tieħu d-data, u s-sigrieti qatt ma jilħqu l-kliyent.
Il-browser jirċievi l-HTML/UI rrenduraw, mhux il-kod tal-komponent jew id-dipendenziz tiegħu. Server Component li juża librerija markdown jew date tqila ma jibgħax xejn minn dik il-librerija il-browser — iqanqal drastikament il-ħamsa tal-bundle.
// ❌ 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
L-ebda interattività, stat, effetti, jew browser APIs — dawk jeħtieġu 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} /></>;
}
Il-mudell: Server Components jittrattaw id-data/struttura; imbed Client Components biss fejn il-interattività hija meħtieġa ("gżejjer").
Server Components huma l-feature li tiddefinixxi l-App Router.
Huma jitnaqqsu l-ħamsa tal-bundle tal-kliyent (inqas JS biex tixtgħali/tianalizza), jippermettu l-aċċess dirett u sigur tad-data fuq in-naħa tas-server mingħajr API, u jtejbu l-perforanza u s-SEO.
Il-fatt li taf li huma d-default — u dak li jforza komponent biex ikun Client Component — hu fundamental biex tikkilkula l-apps tal-App Router b'mod effiċjenti.