Hvordan fungerer Server Components i App Router?

Question

Accepted Answer

**React Server Components (RSC)** gjengis **kun på serveren** — deres JavaScript blir aldri sendt til nettleseren. I App Router er hver komponent en Server Component **som standard**; du velger eksplisitt klientoppførsel. ## Hva en Server Component kan gjøre ```tsx // app/users/page.tsx — a Server Component (no "use client") import db from "@/lib/db"; export default async function Users() { const users = await db.user.findMany(); // ✅ direct DB access, runs on server return (

{u.name}

); } ``` Server Components kan være **async**, `await`-vente på data direkte og få tilgang til server-bare ressurser (database, filsystem, hemmeligheter) — fordi de kjører på serveren. Ingen API-lag er nødvendig for å hente data, og hemmeligheter når aldri klienten. ## Den store fordelen: null klient-JS for denne komponenten Nettleseren mottar den **gjengitte HTML/UI**, ikke komponentens kode eller dens avhengigheter. En Server Component som bruker et tung markdown- eller date-bibliotek sender **ingen** av det biblioteket til nettleseren — drastisk reduksjon av bundle-størrelse. ## Hva Server Components IKKE kan gjøre ```tsx // ❌ 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 ``` Ikke interaktivitet, state, effekter eller nettleser-API-er — disse krever en Client Component. ## Sammensetning av server og klient ```tsx // 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 <>

; } ``` Mønsteret: Server Components håndterer data/struktur; innbygg Client Components bare der interaktivitet er nødvendig ("islands"). ## Hvorfor det er viktig Server Components er den definierende egenskapen til App Router. De reduserer klient-bundle-størrelse (mindre JS å laste ned/analysere), tillater direkte, sikker server-side datakjøp uten API, og forbedrer ytelse og SEO. Å vite at de er standard — og hva som gjør en komponent til en Client Component — er grunnleggende for effektiv strukturering av App Router-apper.