React Server Components (RSC) renderas endast på servern — deras JavaScript skickas aldrig till webbläsaren. I App Router är alla komponenter Server Components som standard; du väljer in klientbeteende explicit.
db ;
() {
users = db..();
(
);
}
Server Components kan vara async, await data direkt och få åtkomst till endast serverns resurser (databas, filsystem, hemligheter) — eftersom de körs på servern. Inget API-lager behövs för att hämta data, och hemligheter når aldrig klienten.
Webbläsaren får renderad HTML/UI, inte komponentens kod eller dess beroenden. En Server Component som använder ett tungviktigt markdown- eller date-bibliotek levererar inget av det biblioteket till webbläsaren — minskar dramatiskt paketstorlek.
// ❌ 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, tillstånd, effekter eller webbläsar-API:er — dessa 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önstret: Server Components hanterar data/struktur; bädda in Client Components endast där interaktivitet behövs ("öar").
Server Components är den avgörande funktionen i App Router.
De minskar klientpaketets storlek (mindre JS att ladda ned/tolka), möjliggör direkt, säker dataaäkomst på serversidan utan ett API och förbättrar prestanda och SEO.
Att veta att de är standard — och vad som tvingar en komponent att vara en Client Component — är grundläggande för att strukturera App Router-appar effektivt.