React Server Components (RSC) csak a szerveren renderelődnek — JavaScriptjük soha nem kerül a böngészőbe. Az App Routerben minden komponens alapértelmezés szerint Server Component; a kliens viselkedésbe explicit módon kell bejelentkezni.
db ;
() {
users = db..();
(
);
}
A Server Components aszinkronok lehetnek, közvetlenül await-elhetnek adatokat, és hozzáférhetnek csak szerveren elérhető erőforrásokhoz (adatbázis, fájlrendszer, titkok) — mert a szerveren futnak. Nincs szükség API rétegre az adatok lekéréséhez, és a titkok soha nem jutnak el a klienshez.
A böngésző a renderelt HTML/UI-t kapja meg, nem a komponens kódját vagy annak függőségeit. Egy Server Component, amely egy nehéz markdown vagy dátumkönyvtárat használ, egyáltalán nem küldi el azt a könyvtárat a böngészőbe — drasztikusan csökkentve a bundle méretét.
// ❌ 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
Nincs interaktivitás, állapot, effektusok vagy böngésző API-k — ezekhez Client Component szükséges.
// 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} /></>;
}
A minta: Server Components kezelik az adatokat/struktúrát; Client Components beágyazása csak ott, ahol interaktivitás szükséges ("szigetek").
A Server Components az App Router meghatározó jellemzője.
Csökkentik a kliens bundle méretét (kevesebb JS letöltéshez/feldolgozáshoz), lehetővé teszik az API nélküli, biztonságos szerveri adathozzáférést, és javítják a teljesítményt és az SEO-t.
Annak ismerete, hogy ezek az alapértelmezés — és mit kell tenni ahhoz, hogy egy komponens Client Component legyen — alapvető az App Router alkalmazások hatékony strukturálásához.