// Unser Enterprise Stack im Überblick
const enterpriseStack = {
  frontend: {
    framework: "Next.js 15.1.6",
    ui: "React 19 mit Server Components",
    styling: "Tailwind CSS + CSS Modules",
    types: "TypeScript durchgängig"
  },
  backend: {
    cms: "Payload CMS 3.48",
    database: "PostgreSQL 16",
    storage: "Vercel Blob Storage",
    auth: "NextAuth + Payload Users"
  },
  infrastructure: {
    hosting: "Vercel Edge Network",
    cdn: "Global Edge Caching",
    monitoring: "Vercel Analytics",
    ci: "GitHub Actions"
  }
}
```
Jede Komponente wurde bewusst gewählt und spielt eine spezifische Rolle im Gesamtsystem.
React Server Components (RSC) sind der Game-Changer für Performance. Statt den gesamten React-Code an den Browser zu senden, wird er auf dem Server ausgeführt. Das Ergebnis: 70% kleinere JavaScript-Bundles.

// Modern: Ausführung auf dem Server
export async function ProductList() {
  // Direkte Datenbankabfrage, kein API-Call nötig
  const products = await getProductsFromDB()
  
  // HTML wird fertig gerendert zum Client geschickt
  return (
    <div className="grid grid-cols-3 gap-4">
      {products.map(product => (
        <ProductCard key={product.id} {...product} />
      ))}
    </div>
  )
}
// Bundle-Größe: 0KB - nur HTML wird übertragen
```
Der Unterschied ist dramatisch: Keine Loading States, kein Layout Shift, sofortiger Content.
Payload CMS ist nicht "noch ein Headless CMS". Es ist von Grund auf für moderne Architekturen konzipiert, mit TypeScript als First-Class-Citizen.

// Multi-Tenant Konfiguration
import { multiTenantPlugin } from '@payloadcms/plugin-multi-tenant'
export default buildConfig({
  plugins: [
    multiTenantPlugin({
      tenantCollection: 'tenants',
      tenantField: 'tenant',
      isolationStrategy: 'filter', // Automatische Filterung
      sharedCollections: ['media'], // Geteilte Ressourcen
    })
  ],
  // Rest der Konfiguration
})

// /lib/payload-services.ts
import { cache } from 'react'
import { getPayload } from 'payload'
// Request-Level Caching mit React.cache
export const getTenantBySlug = cache(async (slug: string) => {
  const payload = await getPayload()
  
  const result = await payload.find({
    collection: 'tenants',
    where: {
      slug: { equals: slug }
    },
    depth: 2 // Lade Beziehungen mit
  })
  
  return result.docs[0] || null
})
// Tenant-aware Datenabfrage
export const getProductsByTenant = cache(async (
  tenantId: string,
  options?: {
    limit?: number
    category?: string
    featured?: boolean
  }
) => {
  const payload = await getPayload()
  
  const where: Where = {
    tenant: { equals: tenantId },
    status: { equals: 'published' }
  }
  
  if (options?.category) {
    where.category = { equals: options.category }
  }
  
  if (options?.featured) {
    where.featured = { equals: true }
  }
  
  const result = await payload.find({
    collection: 'products',
    where,
    limit: options?.limit || 10,
    sort: '-createdAt'
  })
  
  return result.docs
})

-- Automatische Tenant-Isolation auf Datenbankebene
CREATE POLICY tenant_isolation ON products
  FOR ALL
  USING (tenant_id = current_setting('app.current_tenant')::uuid);
-- Referentielle Integrität
ALTER TABLE products
  ADD CONSTRAINT fk_tenant
  FOREIGN KEY (tenant_id)
  REFERENCES tenants(id)
  ON DELETE CASCADE;
-- Performante Indizes für Multi-Tenant-Abfragen
CREATE INDEX idx_products_tenant_status 
  ON products(tenant_id, status) 
  WHERE deleted_at IS NULL;

// middleware.ts
import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'
export async function middleware(request: NextRequest) {
  const hostname = request.headers.get('host') || ''
  
  // Extrahiere Subdomain
  const subdomain = hostname.split('.')[0]
  
  // Entwicklung: subdomain.localhost:3000
  // Produktion: subdomain.ihredomain.de
  
  if (subdomain && subdomain !== 'www' && subdomain !== 'admin') {
    // Rewrite zu tenant-spezifischer Route
    return NextResponse.rewrite(
      new URL(/${subdomain}${request.nextUrl.pathname}, request.url)
    )
  }
  
  return NextResponse.next()
}
export const config = {
  matcher: ['/((?!api|_next/static|favicon.ico).*)']
}

// Basis-Komponente mit Tenant-Theming
export const Button: React.FC<ButtonProps> = ({ 
  children, 
  variant = 'primary',
  tenantTheme 
}) => {
  const styles = {
    primary: {
      backgroundColor: tenantTheme?.primaryColor || '#0070f3',
      color: tenantTheme?.primaryTextColor || '#ffffff'
    },
    secondary: {
      borderColor: tenantTheme?.primaryColor || '#0070f3',
      color: tenantTheme?.primaryColor || '#0070f3'
    }
  }
  
  return (
    <button 
      className="px-6 py-3 rounded-lg transition-all"
      style={styles[variant]}
    >
      {children}
    </button>
  )
}
// Verwendung in verschiedenen Kontexten
<Button tenantTheme={berlinTheme}>Jetzt kaufen</Button>
<Button tenantTheme={münchenTheme} variant="secondary">Mehr erfahren</Button>

// Schlecht: Sequentielle Abfragen
const tenant = await getTenant(slug)
const pages = await getPages(tenant.id)  // Wartet auf tenant
const posts = await getPosts(tenant.id)  // Wartet auf pages
// Gesamtzeit: 300ms + 200ms + 250ms = 750ms
// Gut: Parallele Abfragen
const [tenant, settings] = await Promise.all([
  getTenant(slug),
  getGlobalSettings()
])
const [pages, posts, products] = await Promise.all([
  getPages(tenant.id),
  getPosts(tenant.id),
  getProducts(tenant.id)
])
// Gesamtzeit: max(300ms, 250ms) = 300ms

// Statische Seiten mit ISR (Incremental Static Regeneration)
export const revalidate = 3600 // Cache für 1 Stunde
export async function generateStaticParams() {
  const tenants = await getAllTenants()
  const pages = await getAllPages()
  
  return tenants.flatMap(tenant =>
    pages.map(page => ({
      tenantSlug: tenant.slug,
      pageSlug: page.slug
    }))
  )
}
// Seiten werden beim ersten Besuch generiert und gecacht

// Standardisierte Access Control Patterns
export const publicTenantReadAccess: Access = ({ req }) => {
  // Öffentliche Leser sehen nur ihren Mandanten
  if (!req.user) {
    return {
      tenant: {
        equals: req.context?.tenant?.id
      }
    }
  }
  return true
}
export const tenantAdminAccess: Access = ({ req }) => {
  const user = req.user
  
  // Super-Admins haben vollen Zugriff
  if (user?.role === 'super-admin') return true
  
  // Tenant-Admins nur auf ihren Bereich
  if (user?.role === 'tenant-admin') {
    return {
      tenant: {
        equals: user.tenant?.id
      }
    }
  }
  
  return false
}

pnpm generate:types  # Generiert Types aus Payload-Schema
pnpm dev  # Next.js Fast Refresh + Payload Admin
pnpm lint  # ESLint + Prettier
pnpm migrate:create  # Erstellt neue Migration
pnpm migrate:run     # Führt Migrations aus
pnpm test           # Jest + React Testing Library
pnpm test:e2e       # Playwright E2E Tests

// Dynamischer Import für große Komponenten
import dynamic from 'next/dynamic'
const InteractiveMap = dynamic(
  () => import('@/components/InteractiveMap'),
  { 
    loading: () => <MapSkeleton />,
    ssr: false  // Nur client-seitig laden
  }
)
// Komponente wird erst geladen, wenn benötigt
export function ContactPage() {
  return (
    <div>
      <h1>Kontakt</h1>
      <Suspense fallback={<MapSkeleton />}>
        <InteractiveMap />
      </Suspense>
    </div>
  )
}

// Sofortiges UI-Feedback, während Server arbeitet
export function LikeButton({ postId, initialLikes }) {
  const [likes, setLikes] = useState(initialLikes)
  const [isLiking, setIsLiking] = useState(false)
  
  async function handleLike() {
    // Optimistic Update
    setLikes(prev => prev + 1)
    setIsLiking(true)
    
    try {
      await likePost(postId)
    } catch (error) {
      // Rollback bei Fehler
      setLikes(prev => prev - 1)
      toast.error('Fehler beim Liken')
    } finally {
      setIsLiking(false)
    }
  }
  
  return (
    <button onClick={handleLike} disabled={isLiking}>
      ❤️ {likes}
    </button>
  )
}
```
Die vorgestellte Architektur ist kein zufälliges Zusammenspiel von Technologien. Jede Komponente wurde bewusst gewählt und optimiert, um zusammen ein System zu schaffen, das:
Diese Architektur ist nicht theoretisch – sie läuft produktiv, sie skaliert, sie liefert messbare Geschäftsergebnisse.
✅ React Server Components reduzieren Bundle-Größen um 70%
✅ Payload CMS bietet Enterprise-Features out-of-the-box
✅ Service Layer Pattern sorgt für Clean Architecture
✅ PostgreSQL garantiert Datenintegrität
✅ Component-Driven Development ermöglicht Wiederverwendung
Im nächsten Artikel: "Performance als Wettbewerbsvorteil" – Wir zeigen konkret, wie wir 95+ PageSpeed Scores erreichen und was das für Ihr Business bedeutet.
Bleiben Sie dran für Teil 3 der Serie →
Dies ist Teil 2 einer 5-teiligen Serie über Enterprise-Ready Multi-Tenant-Architekturen.