React Server Components (RSC) se vykreslují pouze na serveru — jejich JavaScript se nikdy neposílá do prohlížeče. V App Routeru je každá komponenta Server Component ve výchozím nastavení; chování klienta si explicitně volíte.
db ;
() {
users = db..();
(
);
}
Server Components mohou být asynchronní, přímo await data a přistupovat k prostředkům pouze na serveru (databáze, souborový systém, tajemství) — protože běží na serveru. Pro načítání dat není potřeba vrstva API a tajemství se nikdy nedostanou na klienta.
Prohlížeč obdrží vykreslený HTML/UI, ne kód komponenty nebo její závislosti. Server Component, který používá těžkou markdown či date knihovnu, neposílá žádnou z těchto knihoven do prohlížeče — dramaticky snižuje velikost 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
Žádná interaktivita, state, effects nebo browser API — ty vyžadují 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} /></>;
}
Vzor: Server Components zpracovávají data/strukturu; Client Components vkládejte pouze tam, kde je potřeba interaktivita ("islands").
Server Components jsou definující funkcí App Routeru.
Snižují velikost client bundle (méně JS k stažení/zpracování), umožňují přímý, bezpečný přístup k datům na straně serveru bez API a zlepšují výkon a SEO.
Vědomí, že jsou výchozí — a co nutí komponentu, aby byla Client Component — je zásadní pro efektivní strukturování aplikací App Routeru.