Frontend Academy · Lektion

Serverkomponenter och klientkomponenter

Förstå React Server Components, när direktivet 'use client' ska läggas till och hur serverrenderad HTML kan blandas med interaktiva klientöar.

Lektion 2 av 414 steg

Serverkomponenter och klientkomponenter är en gratis lektion i Frontend Academy på CoddyKit. Detta är lektion 2 av 4. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för Frontend Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Frontend Academy innehåller totalt 4 lektioner.

Två världar i en app

React Server Components (RSC) gör det möjligt att dela upp ett komponentträd mellan serverrenderade och klientinteraktiva delar. I Next.js App Router är komponenter som standard Server Components; välj Client med 'use client'.

Vad Server Components gör

Server Components körs endast på servern. De kan: hämta data direkt, komma åt filsystemet, använda hemligheter som endast finns på servern och rendera till HTML utan att skicka React till klienten. De kan inte: använda hooks, hantera state eller hantera events.

Vad Client Components gör

Client Components körs på servern för SSR (initial HTML) och på klienten för interaktivitet. De kan: använda useState, useEffect, event handlers och webbläsar-API:er.

Server som standard

I Next.js App Router är varje komponent en Server Component som standard. Det är utmärkt — större delen av appen renderas statiskt.

// app/posts/page.tsx — Server Component by default
export default async function Posts() {
  const posts = await fetch('https://api/posts').then(r => r.json());
  return (
    <ul>
      {posts.map(p => <li key={p.id}>{p.title}</li>)}
    </ul>
  );
}

Aktivera Client

Lägg till 'use client' högst upp i en fil för att markera dess komponenter (och deras importer) som Client Components.

// app/Counter.tsx
'use client';

import { useState } from 'react';

export default function Counter() {
  const [n, setN] = useState(0);
  return <button onClick={() => setN(n + 1)}>{n}</button>;
}

Att kombinera Server och Client

Server Components kan rendera Client Components, men Client Components kan inte importera Server Components. Skicka serverrenderat innehåll som children till Client-wrappers.

// app/page.tsx — Server
import ClientShell from './ClientShell';
import ServerWidget from './ServerWidget';

export default function Home() {
  return (
    <ClientShell>
      <ServerWidget />
    </ClientShell>
  );
}

Därför är mönstret viktigt

Mindre JS-bundlar — endast Client Components skickas till webbläsaren. Direkt åtkomst till databaser och filer — inget API-lager behövs för skrivskyddade data. Bättre SEO och snabbare LCP — HTML levereras färdigrenderad.

Regler för Client-gränsen

När en fil har markerats med 'use client' blir alla komponenter i den filen och alla importerade underordnade komponenter Client Components. 'use client' markerar en gräns mellan server och klient.

Server Actions

Funktioner som markerats med 'use server' körs endast på servern, men kan anropas från Client Components — ungefär som RPC. De används ofta för formulärinskickningar och mutationer.

// app/actions.ts
'use server';
import { revalidatePath } from 'next/cache';

export async function createPost(formData: FormData) {
  const title = formData.get('title') as string;
  await db.posts.create({ data: { title } });
  revalidatePath('/posts');
}

// In a Client form component:
<form action={createPost}>
  <input name="title" />
  <button>Create</button>
</form>

Skicka props från Server till Client

Props som skickas från Server till Client måste vara JSON-serialiserbara — inga funktioner, klasser eller Dates med anpassade strukturer. Konvertera dem innan de skickas.

Identifiera de olika typerna

Titta på importer: useState, useEffect och onClick-handlers tvingar en komponent att vara en Client Component. En komponent som bara visar data kan förbli en Server Component.

Prestandavinster

Server Components minskar JS-bundlen dramatiskt. En sida med huvudsakligen statiskt innehåll och några interaktiva komponenter skickar bara JavaScript för de interaktiva delarna — ibland 90 % mindre.

Snabbtest

Vilken React-hook får INTE användas i en Next.js Server Component?

Besvara frågan i den interaktiva lektionen

Sammanfattning: Server jämfört med Client

Server Components: körs endast på servern, async/await är tillåtet, inga hooks/state/event handlers, mindre bundlar. Client Components: aktiveras med 'use client', interaktiva med useState/useEffect/events. Server kan rendera Client; Client kan inte importera Server (men kan ta emot Server som children). Server Actions ('use server') används för RPC-liknande mutationer.

Gratis att börja

Lär dig HTML med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser: 41
Lektioner: 163

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”Serverkomponenter och klientkomponenter” gratis?

Ja – hela texten till ”Serverkomponenter och klientkomponenter” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i Frontend Academy, kan Ni uppgradera till CoddyKit PRO. Kursen i Frontend Academy innehåller totalt 4 lektioner.

Vad lär jag mig i ”Serverkomponenter och klientkomponenter”?

Förstå React Server Components, när direktivet 'use client' ska läggas till och hur serverrenderad HTML kan blandas med interaktiva klientöar. Ni övar på Frontend Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig Frontend Academy?

Du behöver inga förkunskaper. Utbildningen i Frontend Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 2 av 4.

Hur lång tid tar lektionen ”Serverkomponenter och klientkomponenter”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här Frontend Academy-lektionen?

Ja. Varje Frontend Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

← Tillbaka till Frontend Academy