1~
2React Server Components (RSC) har fundamentalt ændret, hvordan vi bygger React-applikationer. Ved at flytte renderingslogik til serveren kan vi markant reducere JavaScript-bundlet, der sendes til klienten, hvilket fører til hurtigere indlæsningstider og bedre brugeroplevelser. I denne artikel udforsker vi avancerede mønstre og bedste praksis for at udnytte RSC i 2026.
3~
4## Hvad er Server Components?
5~
6Traditionelt blev React-komponenter renderet helt på klienten (CSR) eller forud-renderet på serveren som HTML (SSR) og derefter hydreret på klienten. **Server Components** giver os mulighed for at rendere komponenter _udelukkende_ på serveren. Deres kode sendes aldrig til browseren.
7~
8### Fordelene
9~
101.  **Nul bundle-størrelse**: Afhængigheder, der bruges i Server Components (som markdown-parsere eller tunge dato-biblioteker), forbliver på serveren.
112.  **Direkte backend-adgang**: Du kan forespørge din database direkte inde i din komponent uden at eksponere API-endpoints.
123.  **Automatisk kodesplitning**: Klientkomponenter, der importeres serverside, splittes automatisk i separate bundles.
13~
14## Datahentnings-mønster
15~
16Med RSC kan du gøre dine komponenter `async` og afvente data direkte.
17~
18```tsx
19// app/users/page.tsx
20import { db } from '@/lib/db';
21~
22export default async function UsersPage() {
23  const users = await db.user.findMany();
24~
25  return (
26    <main>
27      <h1>Brugere</h1>
28      <ul>
29        {users.map((user) => (
30          <li key={user.id}>{user.name}</li>
31        ))}
32      </ul>
33    </main>
34  );
35}
36```
37~
38### Suspense til streaming
39~
40Da datahentning kan være langsom, kan du omslutte dine komponenter i `<Suspense>` for at vise en fallback-UI med det samme, mens data indlæses.
41~
42```tsx
43import { Suspense } from 'react';
44import UserList from './UserList';
45import LoadingSkeleton from './LoadingSkeleton';
46~
47export default function Page() {
48  return (
49    <section>
50      <h1>Mine brugere</h1>
51      <Suspense fallback={<LoadingSkeleton />}>
52        <UserList />
53      </Suspense>
54    </section>
55  );
56}
57```
58~
59## Blanding af Server- og Klientkomponenter
60~
61Et af de mest forvirrende aspekter er, hvordan man kombinerer Server- og Klientkomponenter.
62~
63**Tommelfingerregel**: Server Components kan importere Client Components. Client Components _kan ikke_ importere Server Components direkte. Du kan dog sende en Server Component som `children` til en Client Component.
64~
65### "Children"-mønsteret
66~
67```tsx
68// ClientComponent.tsx
69'use client';
70~
71import { useState } from 'react';
72~
73export default function ClientWrapper({ children }) {
74  const [count, setCount] = useState(0);
75~
76  return (
77    <div onClick={() => setCount((c) => c + 1)}>
78      Antal: {count}
79      {children} {/* Dette kan være en Server Component! */}
80    </div>
81  );
82}
83```
84~
85```tsx
86// ServerPage.tsx
87import ClientWrapper from './ClientWrapper';
88import ServerContent from './ServerContent';
89~
90export default function Page() {
91  return (
92    <ClientWrapper>
93      <ServerContent /> {/* Dette fungerer perfekt */}
94    </ClientWrapper>
95  );
96}
97```
98~
99## Almindelige faldgruber
100~
1011.  **Brug af Context i Server Components**: Context er et klientside-koncept. Hvis du har brug for at dele data serverside, skal du sende det som props eller bruge en specialiseret request-scope cache.
1022.  **Tilføjelse af event handlers**: Du kan ikke tilføje `onClick` eller `onChange` til en Server Component. Den logik hører til i en generisk Client Component-bladknude.
103~
104## Konklusion
105~
106React Server Components er ikke bare en funktion; de er et paradigmeskift. Ved at forstå grænsen mellem server og klient kan du bygge applikationer, der er både yderst interaktive og utroligt hurtige.
107~