React Server Components – Neue Ära der React-Anwendungen in 2026

Kurzfassung

React Server Components (RSC) sind Komponenten, die auf dem Server gerendert werden und kein JavaScript an den Browser senden. Sie reduzieren Bundle-Größe, verbessern Performance und SEO. So funktionieren sie und wann Sie sie 2026 nutzen sollten.

Für wen ist das

• React/Next.js-Entwickler, die Performance verbessern wollen
• Teams, die Anwendungen mit vielen Daten bauen
• Unternehmen, die besseres SEO und schnellere Ladezeiten suchen

Keyword (SEO)

react server components, rsc, nextjs server components, react performance, server-side rendering

Was sind React Server Components?

React Server Components sind:

• Komponenten, die nur auf dem Server gerendert werden
• Kein JavaScript wird an den Browser gesendet
• Direkter Zugriff auf Datenbanken und APIs
• Kleinere Bundles und schnelleres Laden

Wichtige Unterschiede:

Wie funktionieren Server Components?

1. Server-seitiges Rendering

Server Component:

// app/products/page.tsx
async function ProductsPage() {
  // Direkter Datenbankzugriff
  const products = await db.products.findMany();
  
  return (
    <div>
      {products.map(product => (
        <ProductCard key={product.id} product={product} />
      ))}
    </div>
  );
}

Was passiert:

1. Server rendert Komponente
2. Sendet HTML an Browser
3. Kein JavaScript für diese Komponente

2. Client Components für Interaktivität

Wenn Sie Interaktivität brauchen:

'use client'; // Direktive für Client Component

import { useState } from 'react';

export function AddToCartButton({ productId }: { productId: number }) {
  const [loading, setLoading] = useState(false);
  
  const handleClick = async () => {
    setLoading(true);
    await addToCart(productId);
    setLoading(false);
  };
  
  return (
    <button onClick={handleClick} disabled={loading}>
      In den Warenkorb
    </button>
  );
}

Vorteile von Server Components

1. Kleineres JavaScript-Bundle

Vor RSC:

• Alle Komponenten im Bundle
• Große Größe (500KB+)
• Langsames Laden

Mit RSC:

• Nur Client Components im Bundle
• Kleinere Größe (50-100KB)
• Schnelleres Laden

2. Direkter Datenzugriff

Ohne RSC:

'use client';

useEffect(() => {
  fetch('/api/products')
    .then(res => res.json())
    .then(setProducts);
}, []);

Mit RSC:

async function ProductsPage() {
  const products = await db.products.findMany();
  // Kein fetch, kein useEffect
  return <ProductList products={products} />;
}

3. Besseres SEO

• Vollständiges HTML sofort in Antwort
• Kein JavaScript für Rendering erforderlich
• Schnelleres Indizieren durch Google

4. Sicherheit

Geheime API-Schlüssel:

// Server Component - sicher
async function PaymentPage() {
  const apiKey = process.env.STRIPE_SECRET_KEY; // ✅ Sicher
  // ...
}

// Client Component - UNSICHER
'use client';
const apiKey = process.env.STRIPE_SECRET_KEY; // ❌ Im Bundle sichtbar!

Wann Server Components verwenden?

✅ Verwenden Sie Server Components für:

1. Anzeigen von Daten

   • Produktlisten
   • Blog-Posts
   • Statistiken
   • Datentabellen

2. Statische Bereiche

   • Header/Footer
   • Navigation
   • Sidebar
   • SEO-Metadaten

3. Datenbankzugriff

   • Prisma-Queries
   • SQL-Queries
   • API-Aufrufe mit Geheimnissen

❌ Verwenden Sie Client Components für:

1. Interaktivität

   • Formulare
   • Buttons
   • Dropdowns
   • Modals

2. React Hooks

   • useState
   • useEffect
   • useContext
   • useReducer

3. Event-Handler

   • onClick
   • onChange
   • onSubmit

Next.js 13+ App Router

Struktur:

app/
  layout.tsx          # Server Component (Standard)
  page.tsx            # Server Component
  products/
    page.tsx          # Server Component
    [id]/
      page.tsx        # Server Component
  components/
    Button.tsx        # Client Component ('use client')

Beispiel:

// app/products/page.tsx (Server Component)
import { db } from '@/lib/db';
import { ProductCard } from '@/components/ProductCard';
import { AddToCartButton } from '@/components/AddToCartButton';

export default async function ProductsPage() {
  const products = await db.products.findMany();
  
  return (
    <div>
      <h1>Produkte</h1>
      {products.map(product => (
        <div key={product.id}>
          <ProductCard product={product} />
          <AddToCartButton productId={product.id} />
        </div>
      ))}
    </div>
  );
}

Best Practices

1. Standardmäßig Server Components

Regel: Alles ist Server Component, außer Sie brauchen Interaktivität.

// ✅ Server Component (Standard)
export function ProductList({ products }: { products: Product[] }) {
  return (
    <div>
      {products.map(p => <ProductCard key={p.id} product={p} />)}
    </div>
  );
}

2. Client Components minimieren

Statt:

'use client';

export function ProductPage() {
  const [products, setProducts] = useState([]);
  // ...
}

Besser:

// Server Component
export default async function ProductPage() {
  const products = await getProducts();
  return <ProductList products={products} />;
}

3. Server + Client kombinieren

Muster:

// Server Component
export default async function Page() {
  const data = await fetchData();
  return <InteractiveComponent data={data} />;
}

// Client Component
'use client';
export function InteractiveComponent({ data }: { data: Data }) {
  const [state, setState] = useState();
  // Interaktivität mit Server-Daten
}

4. Streaming und Suspense

Loading-Zustände:

import { Suspense } from 'react';

export default function Page() {
  return (
    <div>
      <Suspense fallback={<Skeleton />}>
        <ProductsList />
      </Suspense>
    </div>
  );
}

FAQ

Ersetzen Server Components SSR?

Nein, sie ergänzen sich. SSR rendert HTML auf Server, sendet aber noch JavaScript. RSC senden kein JavaScript für Server-Komponenten.

Kann ich Hooks in Server Components verwenden?

Nein. Server Components können keine React Hooks (useState, useEffect, etc.) verwenden. Nur Client Components.

Wie Daten von Server zu Client Component übergeben?

Über Props:

// Server Component
const data = await fetchData();
return <ClientComponent data={data} />;

Sind Server Components schneller?

Ja, weil:

• Kleineres JavaScript-Bundle
• Keine Hydration für Server Components
• Schnelleres erstes Rendering

Möchten Sie React Server Components in Ihrem Projekt implementieren?

• Kontakt