React Server Components (RSC) se renderirajo samo na strežniku — njihov JavaScript se nikoli ne pošlje v brskalnik. V App Routerju je vsaka komponenta privzeto Server Component; na vedenje klienta se eksplicitno prijavite.
db ;
() {
users = db..();
(
);
}
Server Components so lahko async, await podatke neposredno in dostopajo do virov, ki so samo na strežniku (podatkovna baza, datotečni sistem, skrivnosti) — ker se izvajajo na strežniku. Za prenos podatkov ni potrebna API plast, skrivnosti pa nikoli ne dosežejo klienta.
Brskalnik prejme renderiran HTML/UI, ne kode komponente ali njenih odvisnosti. Server Component, ki uporablja težko markdown ali date knjižnico, nobene teh knjižnic ne pošlje v brskalnik — dramatično zmanjša velikost paketa.
// ❌ 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
Brez interaktivnosti, stanja, efektov ali API-jev brskalnika — to zahteva 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} /></>;
}
Vzorec: Server Components upravljajo podatke/strukturo; vdelite Client Components le tam, kjer je potrebna interaktivnost ("otoki").
Server Components so določujoča lastnost App Routerja.
Zmanjšujejo velikost client paketa (manj JS za prenos/razčlenjevanje), omogočajo neposreden, varen dostop do podatkov na strežniku brez API-ja in izboljšajo zmogljivost in SEO.
Znati, da so privzeto — in kaj prisili komponento, da je Client Component — je temeljno za učinkovito strukturiranje App Router aplikacij.