React 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.

Hvad er Server Components?

Traditionelt 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.

Fordelene

1. Nul bundle-størrelse: Afhængigheder, der bruges i Server Components (som markdown-parsere eller tunge dato-biblioteker), forbliver på serveren.
2. Direkte backend-adgang: Du kan forespørge din database direkte inde i din komponent uden at eksponere API-endpoints.
3. Automatisk kodesplitning: Klientkomponenter, der importeres serverside, splittes automatisk i separate bundles.

Datahentnings-mønster

Med RSC kan du gøre dine komponenter async og afvente data direkte.

// app/users/page.tsx
import { db } from '@/lib/db';

export default async function UsersPage() {
  const users = await db.user.findMany();

  return (
    <main>
      <h1>Brugere</h1>
      <ul>
        {users.map((user) => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
    </main>
  );
}

Suspense til streaming

Da 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.

import { Suspense } from 'react';
import UserList from './UserList';
import LoadingSkeleton from './LoadingSkeleton';

export default function Page() {
  return (
    <section>
      <h1>Mine brugere</h1>
      <Suspense fallback={<LoadingSkeleton />}>
        <UserList />
      </Suspense>
    </section>
  );
}

Blanding af Server- og Klientkomponenter

Et af de mest forvirrende aspekter er, hvordan man kombinerer Server- og Klientkomponenter.

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.

"Children"-mønsteret

// ClientComponent.tsx
'use client';

import { useState } from 'react';

export default function ClientWrapper({ children }) {
  const [count, setCount] = useState(0);

  return (
    <div onClick={() => setCount((c) => c + 1)}>
      Antal: {count}
      {children} {/* Dette kan være en Server Component! */}
    </div>
  );
}

// ServerPage.tsx
import ClientWrapper from './ClientWrapper';
import ServerContent from './ServerContent';

export default function Page() {
  return (
    <ClientWrapper>
      <ServerContent /> {/* Dette fungerer perfekt */}
    </ClientWrapper>
  );
}

Almindelige faldgruber

1. 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.
2. 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.

Konklusion

React 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.