Auswahl eines Start-up-Frontend-Stacks, der die Liefergeschwindigkeit optimiert
Ein Entscheidungshilfe-Handbuch zur Auswahl einer MVP-Frontend-Stack-Lösung: Next.js oder Vite, Tailwind mit shadcn/ui, TanStack Query zusammen mit Zustand, Supabase oder tRPC – sowie was man vermeiden sollte.
Teams in der Anfangsphase verlieren oft Wochen damit, über Next.js gegenüber Remix, Redux gegenüber Zustand oder GraphQL gegenüber tRPC zu streiten, bevor überhaupt eine einzige Seite existiert. Startups scheitern selten wegen der Wahl eines Frameworks; sie scheitern, weil sie zu langsam vorankommen. Diese Anleitung stellt einen pragmatischen Frontend-Stack für ein neues Produkt vor, erläutert die Gründe hinter jeder Schicht und weist auf Entscheidungen hin, die leise die Geschwindigkeit verringern, damit Sie Ihre Entscheidung bereits am Nachmittag treffen und weitermachen können.
Was der Stack optimieren sollte
Ein Startup-Frontend hat drei Prioritäten: Zeit bis zum Markteintritt, Entwicklererfahrung und Typsicherheit. Skalierbarkeit steht noch nicht auf dieser Liste. Sie müssen am Tag des Launchs keine Millionen gleichzeitiger Nutzer bewältigen; Sie müssen vor Ablauf der verfügbaren Ressourcen eine passende Lösung für Markt und Produkt finden. Jedes der unten aufgeführten Tools wird anhand dieses Ziels bewertet – alles, was hauptsächlich dazu dient, auf einem Lebenslauf gut auszusehen, wird aussortiert.
Das Kernframework: zwei Wege, je nach Produkttyp gewählt
Für die meisten Teams reduziert sich die Entscheidung auf Next.js mit dem App Router oder eine einfache React-Ein-Seiten-Anwendung, die mit Vite erstellt wird. Die entscheidende Frage ist, ob das Produkt von nicht angemeldeten Nutzern schnell gefunden und angezeigt werden muss.
Next.js App Router für öffentliche, SEO-sensitive Produkte
SaaS-Marketingseiten, Marktplätze sowie alle Anwendungen, bei denen Suchsichtbarkeit, Ladezeit beim ersten Aufruf oder Full-Stack-Funktionen wichtig sind, sprechen für Next.js. React Server Components sind bereits integriert, sodass Daten auf dem Server abgerufen werden können und diese Komponenten kein JavaScript an den Browser senden. Zudem verringert das Zusammenführen von API-Endpunkten und der Benutzeroberfläche in einem Repository den Kontextwechsel bei kleinen Teams.
Der Preis birgt eine echte Lernkurve. Jeder im Team muss verstehen, wo die Grenze zwischen Server- und Client-Komponenten liegt – ein Fehlplatzieren dieser Grenze ist eine häufige Ursache für verwirrende Fehler.
Vite plus React Router für Anwendungen hinter einer Anmeldung
Interne Dashboards, hochinteraktive Tools im Stil von Figma oder Canva sowie B2B-Produkte, die hinter Authentifizierungsmechanismen liegen, profitieren nur wenig vom Server-Rendering. Vite ermöglicht ein nahezu sofortiges Starten des Entwicklungs Servers sowie ein reines SPA-Modell, das einfacher und leichter ist – ohne Probleme durch SSR-Hydrierung, die man beheben müsste. Wenn SEO unwichtig ist, bedeutet dieser Ansatz in der Regel weniger Komplexität.
Styling und UI: Tailwind CSS mit shadcn/ui
Große, manuell verfasste Stylesheets sowie umfangreiche, schwer anpassbare Komponentensätze wie Material UI oder Bootstrap eignen sich nicht für ein Team, das täglich iteriert.
Tailwind CSS zum Styling
Ein auf Utility-Elemente ausgerichteter Stil ist mittlerweile der gängige Standard. Die erzeugte CSS-Datei bleibt klein, die Klassennamen kollidieren nie, und Sie gestalten direkt in JSX. Die ersten Tage wirken langsam, doch sobald die Namen der Utility-Elemente zur Gewohnheit werden, ist das Erstellen von Benutzeroberflächen sehr schnell.
shadcn/ui für Komponenten
shadcn/ui ist keine npm-Abhängigkeit im üblichen Sinne. Es handelt sich um eine Sammlung zugänglicher, wiederverwendbarer Komponenten, die auf Radix UI basieren und in Ihre eigene Codebasis kopiert werden können. Da Sie die Quelldateien besitzen, ist es ein einfacher Edit, eine Dropdown-Animation oder das interne Verhalten einer Schaltfläche zu ändern – anstatt mit der API einer Bibliothek zu kämpfen – und die Standard-Einstellungen sehen bereits ausgereift aus.
Der Trade-off besteht darin, dass Sie auch für die Wartung verantwortlich sind: Korrekturen seitens des Entwicklers erreichen Sie nicht über eine Versionserhöhung, daher sollten Sie Updates gezielt herunterladen, wenn sie wichtig sind.
Zustand und Datenerfassung: Serverzustand vom Client-Zustand trennen
Das Einfügen von API-Antworten in einen globalen Redux-Store ist nicht mehr die Standardempfehlung. Nützlicher ist eine Trennung zwischen Daten, die auf dem Server liegen, und Zuständen, die nur in der Benutzeroberfläche existieren.
TanStack Query für Server-Zustände
Das Abrufen, Caching, Verwalten von Lade- und Fehlern sowie das Hintergrund-Aufrufen sind bereits gelöste Probleme. TanStack Query (früher React Query) kümmert sich darum und beseitigt den größten Teil des Overheads, der früher für das Umgehen mit Datenabrufen erforderlich war. Wenn Sie eine konkrete Struktur dafür möchten, sehen Sie unseren Leitfaden zur Strukturierung einer TanStack Query-Datenlage.
Zustand für Client-Zustände
Globaler UI-Zustand, wie beispielsweise ob die Seitenleiste geöffnet ist oder welches Theme aktiv ist, eignet sich hervorragend für Zustand. Er ist sehr klein (unter 1 KB), erfordert fast keinen Overhead und benötigt keine Provider im gesamten Anwendungscode.
Die Regel ist einfach: Wenn die Daten aus einer Datenbank stammen, gehören sie zu TanStack Query; wenn sie nur die Benutzeroberfläche beschreiben, gehören sie zu Zustand. Die Vermischung beider ist die Ursache für die meisten Zustandsfehler in jungen Codebasen.
Der Backend-Shortcut: Supabase oder tRPC mit Drizzle
Frontend-Entwickler in Startups übernehmen oft auch die Verantwortung für den Backend-Bereich, und die Art und Weise, wie die Benutzeroberfläche mit der Datenbank kommuniziert, hat einen großen Einfluss auf die Geschwindigkeit.
Supabase, wenn es kein Backend-Team gibt
Supabase, eine Open-Source-Alternative zu Firebase, bietet eine Postgres-Datenbank, automatisch generierte REST- und GraphQL-APIs, Echtzeit-Abonnements sowie Authentifizierungsfunktionen. Ein funktionsfähiger Backend kann bereits am Nachmittag erstellt werden. Planen Sie frühzeitig, wie Sie den Datenzugriff sichern, denn bei einer BaaS bilden die Regeln der Datenbank das Sicherheitsmodell Ihrer API.
tRPC und Drizzle für ein maßgeschneidertes Backend
In Next.js mit einem benutzerdefinierten Backend bietet tRPC end-to-end typsichere APIs ohne Schritt der Codegenerierung. Ändert man ein Schema auf der Serverseite, zeigt der Client sofort einen TypeScript-Fehler an. Drizzle ORM fügt eine leichte, typisierte Datenbankschicht darunter hinzu. Diese Konfiguration setzt TypeScript auf beiden Seiten voraus, idealerweise in einem einzigen Repository. Teams, die tRPC schrittweise einführen, finden unser Artikel unter Catchen von API-Vertragsabweichungen durch schrittweise tRPC-Einführung nützlich.
Tools und Entwicklererfahrung
Diese Schicht ist für Benutzer unsichtbar, entscheidet aber darüber, ob der Codebase wartbar bleibt:
- TypeScript im strengen Modus. Behandeln Sie dies als unverhandelbar. Es erkennt Fehler bereits vor der Produktion und dient gleichzeitig als Dokumentation für neue Teammitglieder.
Der Anti-Stack: Was man weglassen sollte
Schnelles Arbeiten hängt genauso davon ab, was man sich weigert zu entwickeln:
- Mikro-Frontends. Sie lösen die Koordinationsprobleme vieler unabhängiger Teams. Ein Startup hat ein Team – entwickeln Sie eine einzige Anwendung oder ein Monorepo.
- Redux für ein MVP. Es sei denn, das Produkt ist ein komplexes, offline-first-Kollaborationswerkzeug, fügt es unnötige Komplexität hinzu.
- Ein maßgeschneidertes Design-System. Wochen, die mit der Erstellung individueller Button-Varianten verbracht werden, sind Wochen, die nicht für die Nutzer genutzt werden. Beginnen Sie mit shadcn/ui, passen Sie die CSS-Variablen an Ihre Marke an und kümmern Sie sich später darum.
Zusammenfassung
- Framework: Next.js App Router für öffentliche, SEO-optimierte Produkte; Vite plus React Router für eingeloggte Anwendungen.
- Styling: Tailwind CSS.
- Komponenten: shadcn/ui auf Radix UI.
- Server-Zustand: TanStack Query.
- Klienten-Zustand: Zustand.
- Backend: Supabase ohne Backend-Team; tRPC plus Drizzle für ein eigenes Backend.
- Werkzeuge: strikter TypeScript und Biome.
- Hosting: Vercel oder Cloudflare Pages.
Fazit
Der beste Stack ist der, der einem nicht im Weg steht. Bewährte Tools wie Next.js, Tailwind, shadcn/ui und TanStack Query erzeugen nicht nur schneller Code; sie verschaffen Zeit, um mit Nutzern zu sprechen, Funktionen weiterzuentwickeln und eine passende Lösung für den Markt zu finden. Auch keine dieser Wahlmöglichkeiten ist dauerhaft: Jede Schicht kann ausgetauscht werden, sobald die tatsächliche Nutzung zeigt, wo die Engpässe liegen. Treffen Sie eine Entscheidung, schreiben Sie sie auf und verwenden Sie die dadurch gewonnenen Wochen für das Produkt.
Verwandte Artikel
- Drei TypeScript-Muster, die die Architektur von React-Apps verbessern — Erfahren Sie, wie die Repository-, Observer- und Builder-Muster das Typensystem von TypeScript nutzen, um sauberere, wartbarere React- und Next.js-Codebasen zu erstellen.