Server Components in Next.js 15 — Was du wissen musst

Warum Server Components?

React Server Components (RSC) sind eines der wichtigsten Features in Next.js 15. Sie ermöglichen es, Komponenten ausschließlich auf dem Server zu rendern — ohne JavaScript an den Client zu senden.

Die Vorteile auf einen Blick

• Kleinere Bundle-Größe: Weniger JavaScript = schnellere Ladezeiten
• Direkter Datenbankzugriff: Kein API-Layer nötig
• Bessere SEO: Inhalte sind sofort im HTML verfügbar
• Sicherheit: Sensible Daten bleiben auf dem Server

Ein einfaches Beispiel

// app/blog/page.tsx — Server Component (Standard)
import { prisma } from "@/lib/prisma"

export default async function BlogPage() {
  const posts = await prisma.blogPost.findMany({
    where: { status: "PUBLISHED" },
    orderBy: { publishedAt: "desc" },
  })

  return (
    <div>
      {posts.map((post) => (
        <article key={post.id}>
          <h2>{post.titleDe}</h2>
          <p>{post.descriptionDe}</p>
        </article>
      ))}
    </div>
  )
}

Hinweis: Server Components sind der Standard in Next.js 15. Du musst "use client" nur dann hinzufügen, wenn du Browser-APIs, State oder Event-Handler brauchst.

Wann brauche ich Client Components?

Feature	Server Component	Client Component
Datenbank-Zugriff	✅	❌
useState / useEffect	❌	✅
Event-Handler (onClick)	❌	✅
Browser-APIs	❌	✅
SEO-kritische Inhalte	✅	⚠️

Best Practices

1. Starte mit Server Components — wechsle nur bei Bedarf zu Client Components
2. Halte Client Components klein — extrahiere interaktive Teile in eigene Dateien
3. Nutze Server Actions für Formulare und Mutationen
4. Vermeide unnötige "use client"-Direktiven in Layouts

---

Server Components verändern grundlegend, wie wir React-Anwendungen bauen. Der Schlüssel liegt darin, die Grenze zwischen Server und Client bewusst zu ziehen.