React Server Components (RSC) renderes udelukkende på serveren — deres JavaScript sendes aldrig til browseren. I App Router er hver komponent en Server Component som standard; du vælger eksplicit client-adfærd.
db ;
() {
users = db..();
(
);
}
Server Components kan være asynkrone, direkte await data og få adgang til kun-server-ressourcer (database, filsystem, hemmeligheder) — fordi de kører på serveren. Ingen API-lag er nødvendigt for at hente data, og hemmeligheder når aldrig klienten.
Browseren modtager det renderede HTML/UI, ikke komponentens kode eller dens dependencies. En Server Component, der bruger et tungt markdown- eller date-bibliotek, sender intet af det bibliotek til browseren — reducerer bundle-størrelsen dramatisk.
// ❌ 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
Ingen interaktivitet, state, effects eller browser API'er — disse kræver en 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} /></>;
}
Mønsteret: Server Components håndterer data/struktur; indlejr Client Components kun hvor interaktivitet er nødvendigt ("islands").
Server Components er den definerende feature i App Router.
De reducerer client bundle-størrelse (mindre JS at downloade/parse), tillader direkte, sikker server-side datadilgang uden en API, og forbedrer ydeevne og SEO.
At vide, at de er standard — og hvad der tvinger en komponent til at være en Client Component — er fundamentalt for effektivt at strukturere App Router-apps.