--- title: "Der moderne App-Stack erklärt: Auth, Daten und Payments" description: "Wie ein modernes SaaS aufgebaut ist: Frameworks, Clerk für Authentifizierung, Convex für reaktive Daten und Stripe für Payments. Eine klare Landkarte für Builder." type: "article" locale: "de-CH" category: "Technik" canonical: "https://agenticschool.dev/de/wissen/modern-app-stack-explained" datePublished: "2026-06-12" dateModified: "2026-06-12" --- # Der moderne App-Stack erklärt: Auth, Daten und Payments - Kategorie: Technik - Lesezeit: 10 Min. - Veröffentlicht: 2026-06-12 - Aktualisiert: 2026-06-12 - Keywords: app stack, Clerk, Convex, Stripe, SaaS, authentication - Kanonische URL: https://agenticschool.dev/de/wissen/modern-app-stack-explained - Sprache: de-CH > Wie ein modernes SaaS aufgebaut ist: Frameworks, Clerk für Authentifizierung, Convex für reaktive Daten und Stripe für Payments. Eine klare Landkarte für Builder. Ein echtes Produkt ist mehr als eine Website. Es braucht Nutzer, die sich einloggen können, Daten, die bestehen und sich aktualisieren, und einen Weg, Zahlungen entgegenzunehmen. Die gute Nachricht ist, dass du diese harten Teile nicht mehr von Grund auf baust: dedizierte Dienste handhaben jeden davon sicher. Dieser Leitfaden gibt dir die Landkarte - wie die Teile zusammenpassen, welcher Dienst was tut und in welcher Reihenfolge du sie zusammensetzt - damit du ein produktives SaaS baust, ohne die gefährlichen Teile neu zu erfinden. ## Wie die Teile zusammenpassen Eine moderne App teilt sich in eine schnelle, indexierbare Marketing-Oberfläche und die interaktive App hinter dem Login. Ein Framework wie Next.js, Astro oder TanStack liefert Struktur, Routing und Rendering. Darauf ergänzt du drei Dienste: Authentifizierung, eine Datenbank und Payments. Marketing- und App-Oberfläche sauber zu trennen lässt jede für ihren Zweck optimieren, was sowohl Performance als auch SEO hilft. ## Authentifizierung mit Clerk Passwörter zu speichern, Sessions zu verwalten und Angriffen korrekt zu widerstehen ist ein tiefes Spezialgebiet, also solltest du es nicht selbst basteln. Clerk handhabt Sign-up, Login, Sessions und Social Login wie Google OAuth, was eine ganze Kategorie an Sicherheitsrisiko entfernt. Du integrierst seine Komponenten und lässt es die Identität verwalten, während deine App alles andere verwaltet. Der Wechsel von Entwicklung zu Produktion ist ein sorgfältiger Key-Tausch, kein Neubau. ## Reaktive Daten mit Convex Convex speichert deine Daten und führt deine Backend-Logik als TypeScript-Funktionen aus. Du deklarierst ein Schema, liest mit Queries und änderst mit Mutations, und die UI aktualisiert sich automatisch, wenn sich etwas ändert, von dem sie abhängt. Starke Typisierung fliesst aus der Datenbank in deine Komponenten und entfernt eine ganze Klasse von Bugs. Für echte Produkte bevorzuge Soft Deletes, die eine Zeile als gelöscht markieren, sie aber behalten, sodass Daten wiederherstellbar bleiben und die Historie intakt bleibt. ## Payments mit Stripe Stripe ist der Standard, um Zahlungen entgegenzunehmen, und es heisst, dass du nie rohe Kartendaten anfasst. Checkout hostet eine sichere Zahlungsseite, Subscriptions handhaben wiederkehrende Umsätze, und Webhooks sagen deiner App, was passiert ist, damit sie mit der Abrechnungsrealität synchron bleibt. Eine strikte Trennung von Test- und Produktions-Keys lässt dich alles bauen und prüfen, ohne echtes Geld zu bewegen. Die harten Details - Proration, Gutscheine und Embedded Checkout - bauen auf diesem Fundament auf. ## Secrets halten alles zusammen Jeder Dienst, den du ergänzt, kommt mit geheimen Keys, und einen zu leaken kann katastrophal sein. Halt sie aus dem Code heraus in env-Dateien, die immer gitignored sind, nutze getrennte Keys für Entwicklung und Produktion, damit ein Fehler in Dev keine Live-Daten berühren kann, und verschlüssele sensible Daten im Ruhezustand. Diese Disziplin ist das Bindegewebe des ganzen Stacks, und sie muss mit jeder neuen Integration mitwachsen. ## Live gehen Launch heisst, jeden Dienst von Entwicklungs- auf Produktions-Keys und -Daten umzustellen, einen nach dem anderen, und jeden zu prüfen, bevor der nächste kommt. Mach dann das Live-Produkt auffindbar, indem du dich bei der Search Console registrierst und eine Sitemap einreichst, und schnell, indem du Core Web Vitals als Teil des Launches behandelst. Eine sorgfältige Reihenfolge verhindert das klassische Launch-Tag-Versagen, bei dem ein vergessener Key Logins oder Abrechnung lahmlegt. ## Häufige Fragen ### Sollte ich meine eigene Authentifizierung bauen? Nein. Passwortspeicherung, Sessions und Angriffsresistenz sind ein tiefes Spezialgebiet, das leicht gefährlich falsch zu machen ist. Ein Dienst wie Clerk handhabt es für dich und entfernt eine ganze Kategorie an Sicherheitsrisiko aus deinem Produkt. ### Was macht Convex anders als eine normale Datenbank? Convex ist reaktiv: wenn sich Daten ändern, aktualisiert sich jede Query, die davon abhängt, automatisch und die UI folgt, sodass du keine manuelle Refetch-Logik mehr schreibst. Deine Backend-Funktionen sind typisiertes TypeScript, was Bugs früh fängt. ### Warum Stripe statt Karten selbst zu handhaben? Stripe Checkout hostet das Zahlungsformular, sodass Kartendaten nie deine Server berühren, was deine Compliance-Last und dein Risiko drastisch senkt. Es handhabt ausserdem Subscriptions, Webhooks und Abrechnungs-Sonderfälle für dich. ### Wie sollte ich Secrets über Umgebungen hinweg handhaben? Halt Secrets in gitignored env-Dateien, nutze getrennte Keys für Entwicklung und Produktion und setze Produktions-Secrets als Host-Umgebungsvariablen. Verschlüssele sensible Daten im Ruhezustand. Committe nie einen Key in dein Repository.