React Server Components (RSC) renderojnë vetëm në server — JavaScript-i i tyre nuk dërgohet kurrë në shfletues. Në App Router, çdo komponent është një Server Component si parazgjedhje; ju zgjedhni sjelljen e klient-it në mënyrë të qartë.
db ;
() {
users = db..();
(
);
}
Server Components mund të jenë async, await të dhënat direkt, dhe të aksesojnë burime vetëm të serverit (bazë të dhënash, sistemi i skedarëve, sekretet) — sepse ato ekzekutohen në server. Asnjë shtresë API nuk është e nevojshme për të marrë të dhënat, dhe sekretet kurrë nuk arrijnë tek klienti.
Shfletuesit merr HTML/UI të renderuar, jo kodin e komponentit ose varësitë e tij. Një Server Component që përdor një bibliotekë të rëndë markdown ose date nuk dërgon asnjë nga kjo bibliotekë tek shfletuesit — zvogëlon ndjeshëm madhësinë e paketës.
// ❌ 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
Asnjë interaktivitet, gjendje, efekte, ose API-je shfletuesish — këto kërkojnë një 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} /></>;
}
Modelimi: Server Components trajtojnë të dhënat/strukturën; futni Client Components vetëm atje ku është e nevojshme interaktiviteti ("ishujt").
Server Components janë veçoria përcaktuese e App Router-it.
Ata zvogëlojnë madhësinë e paketës klient (më pak JS për të shkarkuar/analizuar), lejojnë aksesim të drejtpërdrejtë, të sigurt të të dhënave në anën e serverit pa një API, dhe përmirësojnë performancën dhe SEO.
Ditja se janë si parazgjedhje — dhe çfarë e detyron një komponent të jetë Client Component — është themelore për strukturimin efikase të App Router aplikacioneve.