React Server Components (RSC) sunt randați doar pe server — JavaScript-ul lor nu este niciodată trimis către browser. În App Router, fiecare component este un Server Component în mod implicit; decizi în mod explicit să adopți comportament de client.
db ;
() {
users = db..();
(
);
}
Server Components pot fi async, să aștepte (await) date direct și să acceseze resurse doar de server (bază de date, sistem de fișiere, secrets) — deoarece rulează pe server. Nu este necesară o strat API pentru a prelua date, iar secretele nu ajung niciodată la client.
Browser-ul primește HTML/UI randată, nu codul componentului sau dependențele acestuia. Un Server Component care utilizează o bibliotecă grea de markdown sau date nu trimite nimic din acea bibliotecă către browser — reducând drastic dimensiunea bundle-ului.
// ❌ 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
Fără interactivitate, state, efecte sau API-uri de browser — acestea necesită un 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} /></>;
}
Patternul: Server Components gestionează date/structură; încorporează Client Components doar acolo unde este necesară interactivitatea ("islands").
Server Components sunt caracteristica definitorie a App Router.
Ele reduc dimensiunea bundle-ului de client (mai puțin JS de descărcat/analizat), permit acces direct și sigur la date de pe server fără o API, și îmbunătățesc performanța și SEO.
Știind că sunt implicit — și ce forțează un component să fie un Client Component — este fundamental pentru structurarea eficientă a aplicațiilor App Router.