Kapitel 6: Server & Client Components

📖 Lernziele

In diesem Kapitel lernen Sie:

• ✅ Was Server Components sind und warum sie nützlich sind
• ✅ Was Client Components sind und wann man sie verwendet
• ✅ Die wichtigsten Unterschiede zwischen beiden
• ✅ Die 'use client' Directive korrekt zu verwenden
• ✅ Wann welcher Komponenten-Typ geeignet ist
• ✅ Daten zwischen Server und Client Components zu übergeben

---

6.1 Was sind Server Components?

🎯 Kernkonzept

Server Components (RSC) werden auf dem Server gerendert und als HTML an den Browser gesendet.

📝 Standardverhalten (Next.js 14)

Jede Komponente in app/ ist standardmäßig eine Server Component:

// app/page.js (Server Component - Standard!)
export default function HomePage() {
  // Dieser Code läuft NUR auf dem Server
  const data = await fetchDataFromDatabase();
  
  return <h1>{data.title}</h1>;
}

✅ Vorteile von Server Components

Vorteil	Erklärung
Kleinere Bundle-Größe	Kein JavaScript wird an den Browser gesendet
Direkter Datenbankzugriff	Keine API-Schicht nötig
Bessere SEO	HTML wird vollständig auf dem Server generiert
Sicherheit	Sensible Daten bleiben auf dem Server

---

6.2 Was sind Client Components?

🎯 Kernkonzept

Client Components werden im Browser gerendert und ermöglichen Interaktivität.

📝 Aktivierung ('use client' Directive)

// components/Counter.js (Client Component)
'use client'; // ⚠️ WICHTIG: Muss am Anfang stehen!

import { useState } from 'react';

export default function Counter() {
  const [count, setCount] = useState(0);
  
  return (
    <button onClick={() => setCount(count + 1)}>
      Geklickt: {count} mal
    </button>
  );
}

✅ Wann Client Components nötig sind

Feature	Benötigt Client Component?
useState, useEffect Hooks	✅ Ja
Event Handler (onClick, onChange)	✅ Ja
Browser-APIs (localStorage, window)	✅ Ja
Datenabfrage mit useEffect	✅ Ja

---

6.3 Unterschiede im Detail

📊 Vergleichstabelle

Aspekt	Server Component	Client Component
Rendering	Server	Browser
Interaktivität	❌ Keine	✅ Ja (Hooks, Events)
Datenbankzugriff	✅ Direkt	❌ Nur über API
Bundle-Größe	0 KB	Größer (enthält JS)
Directive	Keine	'use client'
Browser-APIs	❌ Nicht verfügbar	✅ Verfügbar

🎬 Beispiel: Kombination beider Typen

Server Component (app/page.js):

// Server Component (Standard)
import Counter from '@/components/Counter';

export default async function HomePage() {
  // Datenbankabfrage auf dem Server
  const posts = await getPostsFromDB();
  
  return (
    <main>
      <h1>Willkommen!</h1>
      
      {/* Client Component für Interaktivität */}
      <Counter />
      
      {/* Server Component für Datenanzeige */}
      <ul>
        {posts.map(post => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </main>
  );
}

Client Component (components/Counter.js):

'use client';

import { useState } from 'react';

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

---

6.4 'use client' Directive Regeln

⚠️ Wichtige Regeln

Regel	Erklärung
Position	Muss ganz oben in der Datei stehen
Vererbung	Alle importierten Child-Komponenten werden ebenfalls zu Client Components
Nicht umkehrbar	Eine Client Component kann nicht zu einer Server Component werden

✅ Richtig:

'use client'; // ✅ Ganz oben

import { useState } from 'react';

export default function MyComponent() {
  // ...
}

❌ Falsch:

import { useState } from 'react';

'use client'; // ❌ Falsch! Muss ganz oben stehen

export default function MyComponent() {
  // ...
}

---

6.5 Wann welchen Typ verwenden?

🎯 Entscheidungshilfe

Verwenden Sie eine Server Component, wenn:

• ✅ Sie Daten direkt aus einer Datenbank abfragen
• ✅ Keine Interaktivität nötig ist (reine Anzeige)
• ✅ Die Komponente eine kleine Bundle-Größe haben soll
• ✅ SEO wichtig ist

Verwenden Sie eine Client Component, wenn:

• ✅ Sie Hooks verwenden (useState, useEffect)
• ✅ Sie Event-Handler benötigen (onClick, onSubmit)
• ✅ Sie Browser-APIs verwenden (localStorage, geolocation)
• ✅ Sie Zustand (State) verwalten müssen

📝 Empfohlene Strategie (Next.js 14)

1. Standardmäßig Server Component verwenden
2. Nur bei Bedarf zu Client Component wechseln ('use client')
3. Interaktive Teile in eigene Client Components auslagern

---

6.6 Datenübergabe (Server → Client)

🎯 Daten von Server an Client übergeben

Server Component:

// app/page.js (Server Component)
import Counter from '@/components/Counter';

export default async function HomePage() {
  const initialCount = 10; // Daten vom Server
  
  return (
    <Counter startWert={initialCount} />
  );
}

Client Component:

// components/Counter.js (Client Component)
'use client';

import { useState } from 'react';

export default function Counter({ startWert }) {
  const [count, setCount] = useState(startWert); // Server-Daten verwenden
  
  return (
    <button onClick={() => setCount(count + 1)}>
      Klicks: {count}
    </button>
  );
}

⚠️ Wichtig: Nur serialisierbare Daten!

// ✅ Funktioniert (serialisierbar)
<ClientComponent daten={{ name: 'Max', alter: 25 }} />

// ❌ Funktioniert nicht (nicht serialisierbar)
<ClientComponent daten={{ funktion: () => console.log('Hi') }} />

---

📝 Zusammenfassung

In diesem Kapitel haben Sie gelernt:

Konzept	Erklärung
Server Components	Auf dem Server gerendert, keine Interaktivität, kleine Bundle-Größe
Client Components	Im Browser gerendert, interaktiv, benötigt 'use client'
Unterschiede	Rendering-Ort, Interaktivität, Bundle-Größe, Datenbankzugriff
Entscheidungshilfe	Server zuerst, Client nur bei Bedarf
Datenübergabe	Über Props (nur serialisierbare Daten)

✅ Nächste Schritte

1. ✅ Übung: Erstellen Sie eine Server Component, die Daten aus einer API lädt
2. ✅ Übung: Erstellen Sie eine Client Component mit useState
3. ✅ Weiter geht's: Kapitel 7 - Datenabfrage (Data Fetching)

---

🎯 Selbsttest

Frage 1: Was ist der Standard-Typ einer Komponente in Next.js 14 (App Router)?

Antwort anzeigen

Server Component (keine `'use client'` Directive nötig).

Frage 2: Wann müssen Sie 'use client' verwenden?

Antwort anzeigen

Wenn Sie Hooks (`useState`, `useEffect`) oder Event-Handler (`onClick`) verwenden möchten.

Frage 3: Können Server Components direkt auf eine Datenbank zugreifen?

Antwort anzeigen

Ja, das ist einer der Hauptvorteile von Server Components.

---

🚀 Weiter zu Kapitel 7: Datenabfrage