Hvad er React Server Components, og hvordan adskiller de sig fra klientkomponenter?

Question

Accepted Answer

**Server Components (RSC)** gengives på **serveren** og sender et serialiseret resultat til browseren. De sender **nul JavaScript** for sig selv — kun data/markup, ikke deres kode. ## De to slags komponenter ```jsx // Server Component (default in the Next.js App Router): async function ProductPage({ id }) { const product = await db.products.find(id); // fetch DIRECTLY on the server return ; // no client JS for this component } // Client Component — opt in for interactivity: "use client"; function AddToCart() { const [qty, setQty] = useState(1); // hooks/events need the client return ; } ``` ## Evner og begrænsninger | | Server Component | Client Component | |---|---|---| | Kan `await` / hente data direkte | ✅ | ❌ | | Få adgang til serverressourcer/hemmeligheder | ✅ | ❌ | | `useState`/`useEffect`/events | ❌ | ✅ | | Sender JS til browseren | ❌ (nul) | ✅ | ## Hvorfor det betyder noget - **Mindre client JavaScript** → hurtigere indlæsning og interaktivitet. - **Datahentning tæt på kilden** (ingen API round-trip fra browseren, ingen afsløring af databaselegitimationsoplysninger). - Du **komponerer** dem: serverkomponenter gengiver klientkomponenter for interaktive "øer". En serverkomponent kan gengive en klientkomponent, men **ikke** omvendt. ## Faldgruber Props, der sendes over server→klient-grænsen, skal være **serialiserbare** — du kan ikke sende funktioner eller klasseinstanser. RSC ændrer mentalmodellen fra "alt kører i browseren" til "gengivelse på serveren som standard, vælg kun klienten, hvor du har brug for interaktivitet."

	Server Component	Client Component
Kan `await` / hente data direkte	✅	❌
Få adgang til serverressourcer/hemmeligheder	✅	❌
`useState`/`useEffect`/events	❌	✅
Sender JS til browseren	❌ (nul)	✅