React Server Components (RSC) renderen alleen op de server — hun JavaScript wordt nooit naar de browser verzonden. In de App Router is elke component standaard een Server Component; je kiest expliciet voor client-gedrag.
db ;
() {
users = db..();
(
);
}
Server Components kunnen async zijn, gegevens rechtstreeks await-en en alleen-server-resources (database, bestandssysteem, secrets) benaderen — omdat ze op de server draaien. Er is geen API-laag nodig om gegevens op te halen, en secrets bereiken nooit de client.
De browser ontvangt de gerenderde HTML/UI, niet de code van de component of de bijbehorende afhankelijkheden. Een Server Component die een zware markdown- of date-bibliotheek gebruikt, stuurt geen van die bibliotheek naar de browser — de bundlegrootte wordt drastisch verkleind.
// ❌ 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
Geen interactiviteit, state, effects of browser-API's — die vereisen een 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} /></>;
}
Het patroon: Server Components verwerken gegevens/structuur; embed Client Components alleen waar interactiviteit nodig is ("islands").
Server Components zijn het definiërende kenmerk van de App Router.
Zij verkleinen de client-bundlegrootte (minder JS om te downloaden/parseren), stellen directe, veilige server-side gegevenstoegang zonder API mogelijk en verbeteren de prestaties en SEO.
Weten dat ze standaard zijn — en wat dwingt een component om een Client Component te zijn — is fundamenteel voor het efficiënt structureren van App Router-apps.