React Server Components mit Claude Code: RSC und Suspense 2026

# Prompt: "Erkläre wann ich Server Component vs. Client Component nutze # und implementiere ein Dashboard mit beiden" // app/dashboard/page.tsx — Server Component (DEFAULT in Next.js App Router) // Kein 'use client' = Server Component import { db } from '@/lib/db' import { InteractiveChart } from './InteractiveChart' // Client Component export default async function DashboardPage() { // Direkter DB-Zugriff — kein API-Endpoint nötig! const stats = await db.query.orders.findMany({ where: eq(orders.status, 'completed'), orderBy: desc(orders.createdAt), limit: 30 }) return ( <div> <h1>Dashboard</h1> {/* Server-gerenderte Statistiken */} <StatsGrid stats={stats} /> {/* Client Component für Interaktivität */} <InteractiveChart data={stats} /> </div> ) } // app/dashboard/InteractiveChart.tsx — Client Component 'use client' // ← Explizit als Client markieren import { useState } from 'react' import { LineChart } from 'recharts' export function InteractiveChart({ data }: Props) { const [range, setRange] = useState('7d') // useState, useEffect, Event Handlers: nur in Client Components! return <LineChart data={filteredData(data, range)} /> }

# Prompt: "Implementiere Streaming mit Suspense für langsame Datenbankabfragen" // app/products/page.tsx import { Suspense } from 'react' import { ProductList, ProductListSkeleton } from './components' import { RecommendationPanel } from './recommendations' export default function ProductsPage() { return ( <div> <h1>Produkte</h1> {/* Schnell: sofort gestreamt */} <Suspense fallback={<ProductListSkeleton />}> <ProductList /> {/* async Server Component */} </Suspense> {/* Langsam: eigener Suspense-Boundary */} <Suspense fallback={<div>Empfehlungen laden...</div>}> <RecommendationPanel /> </Suspense> </div> ) } // ProductList — async Server Component async function ProductList() { // await hier = Suspense Boundary aktiviert Skeleton const products = await fetchProducts() // kann 200ms dauern return <ul>{products.map(p => <ProductCard key={p.id} {...p} />)}</ul> } # Ergebnis: Browser zeigt sofort Skeleton, Produkte streamen rein wenn fertig

# Prompt: "Erstelle ein Formular zum Erstellen eines Produkts mit Server Action" // app/products/new/page.tsx 'use server' async function createProduct(formData: FormData) { 'use server' // ← Diese Funktion läuft NUR auf dem Server const name = formData.get('name') as string const price = Number(formData.get('price')) // Validation const result = ProductSchema.safeParse({ name, price }) if (!result.success) { return { error: result.error.flatten() } } // Direkter DB-Zugriff — kein API-Endpoint! await db.insert(products).values(result.data) revalidatePath('/products') // Cache invalidieren redirect('/products') } export default function NewProductPage() { return ( {/* action={createProduct}: kein onSubmit, kein fetch! */} <form action={createProduct}> <input name="name" required /> <input name="price" type="number" required /> <button type="submit">Erstellen</button> </form> ) }