React Server Components (RSC) są renderowane wyłącznie na serwerze — ich JavaScript nigdy nie jest wysyłany do przeglądarki. W App Router każdy component jest Server Component domyślnie; jawnie decydujesz o zachowaniu client-side.
db ;
() {
users = db..();
(
);
}
Server Components mogą być async, bezpośrednio await-ować dane i uzyskiwać dostęp do zasobów tylko dla serwera (baza danych, system plików, sekrety) — ponieważ działają na serwerze. Nie jest potrzebna warstwa API do pobierania danych, a sekrety nigdy nie docierają do klienta.
Przeglądarka otrzymuje renderowany HTML/UI, a nie kod componenta lub jego zależności. Server Component korzystający z ciężkiej biblioteki markdown lub date nigdy nie wysyła tej biblioteki do przeglądarki — dramatycznie zmniejsza rozmiar bundla.
// ❌ 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
Brak interaktywności, state, effects ani browser APIs — wymagają 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} /></>;
}
Wzorzec: Server Components obsługują dane/strukturę; osadzaj Client Components tylko tam, gdzie potrzebna jest interaktywność ("islands").
Server Components to definiująca cecha App Router.
Zmniejszają rozmiar bundla klienta (mniej JS do pobrania/parsowania), umożliwiają bezpośredni, bezpieczny dostęp do danych po stronie serwera bez API i poprawiają wydajność i SEO.
Zwiedza, że są domyślne — i co zmusza component do bycia Client Component — jest fundamentalne dla efektywnego strukturowania aplikacji App Router.