TanStack Ship for SaaS: Why TanStack-Native Beats a Generic Boilerplate

Geschrieben von Huifer, Solo-Entwickler und Maintainer von TanStack Ship. Ich habe TanStack Ship entwickelt, weil ich zwischen 2023 und 2026 über 12 TanStack-Apps auf Cloudflare Workers deployed habe und es leid war, jedes Mal denselben Stripe-Webhook-Handler neu zu schreiben. Die kommerziellschicht — der Teil, der eine deployed App in ein zahlendes Geschäft verwandelt — hat mir die meisten Wochenenden gekostet. Dieser Beitrag ist der Erfahrungsbericht aus diesen Wochenenden.

Verifizierte Quellen: TanStack Start docs · Cloudflare Workers pricing · Cloudflare D1 limits · Stripe webhook signing · TanStack Ship features Last updated: 2026-06-18 · Changelog

TL;DR: Eine kommerzielle SaaS hat drei Schichten — Foundation (Auth, DB, Hosting), Commerce-Loop (Stripe, Webhooks, MRR-Dashboard) und Growth-Loop (UTM-Capture, Referral-Credits, ROI). Die meisten Vorlagen hören bei der ersten Schicht auf. TanStack Ship liefert alle drei als 14 Produktionsmodule auf TanStack Start + Cloudflare Workers. Die kommerzielle Mathematik für einen Solo-Gründer: ca. 5 $/Monat Hosting bei 100k Requests gegenüber ca. 50 $ auf einem Next.js + Vercel + Postgres-Stack. Unten: die Schichten, die Architektur und die Founder-Fit-Entscheidung am Ende.

What „Commercial for SaaS" Actually Means — Three Layers, Not One

Wenn ein Solo-Gründer mich fragt „Ist diese Vorlage kommerziell einsatzbereit?", übersetze ich das in drei ehrlichere Fragen:

1. Kann ich sie heute deployen und eine echte Zahlung über Stripe Checkout erhalten, ohne Code zu schreiben?
2. Kann ich morgen sehen, wie viel MRR ich gemacht habe, welche UTM-Quelle sie getrieben hat und welcher Coupon eingelöst wurde?
3. Kann ich einem anderen Gründer Zugang geben, ihm einen 20%-Rabattcode geben und beobachten, wie die Gutschrift in eine Referral-Auszahlung fließt?

Die meisten Vorlagen beantworten Frage eins mit „Ja" und die Fragen zwei und drei mit „Nein". Genau diese Lücke soll TanStack Ship schließen.

Layer 1 — Die Foundation (Auth, DB, Hosting)

Die Foundation bewältigen alle Vorlagen: TanStack Router für typsicheres Routing, Cloudflare D1 für die SQLite-kompatible Edge-Datenbank, Better Auth für Sessions, R2 für Datei-Uploads und ein Ein-Befehl-wrangler deploy. Die meisten „TanStack Starter" auf GitHub behandeln das als das gesamte Lieferobjekt. Ich behandle es alsRough 20% dessen, was eine kommerzielle SaaS braucht. Die anderen 80% sind das, was jeder Vergleichsbeitrag übersieht.

Layer 2 — Die Commerce-Loop (Stripe, Webhooks, MRR)

Hier verlieren die meisten Indie-Gründer ihr erstes Wochenende. Stripe Checkout ist einfach. Die Webhook-Signaturverifizierung auf Cloudflare Workers erfordert sorgfältige raw-body-Handhabung — ich habe einen Postmortem zu diesem Failure Mode geschrieben, der mich einen Sonntag gekostet hat. Zusätzlich brauchen Sie:

• Einen Webhook-Handler, der idempotent ist (Stripe wiederholt bei Non-2xx)
• Einen Customer-Portal-Link-Flow
• Eine Subscription-State-Machine (active, trialing, past_due, canceled)
• Eine Pricing Engine, die Monthly + Annual + Coupons + Referral-Credits-Stacking unterstützt
• Ein MRR/ARR-Dashboard, das sich aus derselben Datenbank aktualisiert

TanStack Ship liefert alle fünf. Die Pricing Engine ist eine Server Function, die ein Kontextobjekt (User, Coupon, Credits, UTM) entgegennimmt und den Endpreis zurückgibt.

// src/server/functions/pricing.ts
import { createServerFn } from "@tanstack/start"
import { getContextPrice } from "@/server/db/pricing"

export const computePrice = createServerFn({ method: "POST" })
  .validator((input: { planId: string; couponCode?: string; refCode?: string }) => input)
  .handler(async ({ data, context }) => {
    const { session } = context
    return getContextPrice({
      planId: data.planId,
      userId: session?.userId ?? null,
      couponCode: data.couponCode ?? null,
      referralCode: data.refCode ?? null,
      utmSource: context.cookies["utm_source"] ?? null,
    })
  })

Der Handler gibt den ermäßigten Preis plus eine Aufschlüsselung zurück, die das Checkout-UI rendern kann — Coupon-Betrag, angewendete Gutschrift, Referral-Rabatt, UTM-Quelle. Stripe Checkout erhält den Endpreis und die Aufschlüsselung wird in die conversions-Zeile geschrieben.

Layer 3 — Die Growth-Loop (UTM, Referrals, ROI)

Das ist die Schicht, die eine deployed SaaS in eine kommerzielle SaaS verwandelt. Drei Subsysteme:

• SSR UTM Capture: ?utm_source=hn&utm_campaign=launch landet auf einer Landing Page, die das UTM-Tupel in einem Erstanbieter-Cookie speichert. Wenn der Besucher konvertiert, reist die UTM-Information mit dem Stripe-Event in eine conversions-Tabelle.
• Referral Credits: Ein eingeloggter User erhält einen Referral-Code; wenn ein neuer User sich über ?ref=… anmeldet, erhalten beide Accounts Gutschriften, die die Pricing Engine automatisch berücksichtigt.
• Multi-Channel ROI Dashboard: Eine Admin-Ansicht, die beantwortet: „Für jeden Dollar, den ich im Juni auf HN, Product Hunt und Twitter ausgegeben habe — wie viel MRR kam zurück?"

Ich habe das Ende-zu-Ende auf einer Produktions-App shipped, die im Juni 2026 ca. 4.200 $ eingenommen hat — 38% einer bestimmten UTM-Quelle zuzuordnen, 11% aus eingelösten Referral-Credits. Keine dieser Attributionen wäre existent, wenn ich bei „Stripe Checkout verkabelt" aufgehört und die darunterliegende Schicht übersprungen hätte.

Why TanStack-Native Beats Framework-Agnostic

Es gibt heute zwei Wege, einen SaaS-Starter zu bauen: ein Framework wählen und ein generisches Boilerplate anpassen, oder die TanStack-native Architektur wählen und die Toolchain konsistent von Routing bis Data halten.

Compile-time type safety across the route

Mit TanStack Router + Server Functions zeigt sich ein defekter Link bereits zur Build-Zeit. Die Route /admin/billing/$invoiceId resolvt entweder zu einer Server Function, die { amount, currency, status } zurückgibt, oder der Build schlägt fehl. Das klingt klein, bis Sie eine Next.js-App shipped haben, bei der eine umbenannte Server-Prop als undefined deserialisiert wurde und zur Runtime explodiert ist.

// src/routes/admin/billing/$invoiceId.tsx
import { createFileRoute } from "@tanstack/react-router"
import { getInvoice } from "@/server/functions/billing"

export const Route = createFileRoute("/admin/billing/$invoiceId")({
  loader: async ({ params }) => getInvoice({ data: { id: params.invoiceId } }),
  component: InvoicePage,
})

function InvoicePage() {
  const invoice = Route.useLoaderData()
  // invoice ist vollständig getypt: { amount: number, currency: 'USD' | 'EUR', status: InvoiceStatus }
  return <div>{invoice.amount} {invoice.currency} — {invoice.status}</div>
}

Dieselbe Datei funktioniert in TanStack Start mit SSR Streaming — der Loader läuft auf dem Worker, die Komponente hydriert auf dem Client, und TypeScript prüft den Contract an beiden Enden. Siehe die TanStack Start docs für Streaming und die TanStack Router typegen docs für die Verdrahtung von $invoiceId durch tsr generate.

Edge-native data layer (D1 + R2)

Cloudflare D1 ist SQLite an der Edge. Jede Datenbank kann bis zu 10 GB umfassen gemäß den D1 limits docs, mit bis zu 50.000 Datenbanken pro Account und Read Replicas für horizontale Skalierung. Für eine Solo-SaaS, die keine plattformübergreifenden Writes braucht, ist D1 die günstigste ernsthafte Datenbank in 2026 — im Workers-Bezahlplan für 5 $/Monat inklusive, ohne Zeilenkosten.

R2 ist Objektspeicher mit null Ausgangsgebühren — der einzige große Cloud-Objektspeicher, der nicht pro GB ausgehend berechnet. R2 allein kann 20–200 $/Monat gegenüber S3 oder Vercel Blob sparen.

The lock-in math

Lock-in ist ein berechtigtes Bedenken bei jeder opinionierten Vorlage. Meine ehrliche Einschätzung: TanStack Ship ist portabler als ein Next.js + Vercel + Supabase-Starter.

• Runtime: TanStack Start ist eine dünne Schicht über Vite. Sie können das Output auf jeden Node-Host verschieben.
• Database: D1 ist SQLite. wrangler d1 export lädt in jede Postgres-, MySQL- oder Turso-Instanz.
• Auth: Better Auth ist framework-unabhängig. Die Session-Tabelle ist eine normale D1-Tabelle.
• Stripe: Stripe ist die Konstante, unabhängig davon, zu welcher Vorlage Sie wechseln.

Die Lock-in-Kosten konzentrieren sich auf die 14 Produktionsmodule. TanStack Ship verlassen bedeutet nicht, Daten zu verlieren; Sie verlieren 8–12 Wochenenden des Wiederaufbaus der Geschäftslogik.

The 14 Production Modules — What They Unlock

Hier ist die Modulliste Stand Juni 2026. Jedes Modul wird mit einer D1-Schema-Migration, einer Admin-Shell-Page, einer Server Function API und einer Feature-Page auf dieser Seite ausgeliefert.

Der Punkt ist nicht, dass ein einzelnes Modul neuartig ist — Sie können jedes einzelne an einem langen Wochenende bauen. Der Punkt ist, dass sie sich eine Datenbank, einen Auth-Kontext, eine Admin-Shell und eine Deployment-Pipeline teilen. Sie können nicht fünf halbgebaute Drittanbieterprodukte zusammenkleben, um eine kommerzielle SaaS zu bauen. Sie bekommen eine einzige Codebasis.

The Commercial Math for an Indie Founder

Ich führe eine fortlaufende Tabelle meiner Cloudflare-Rechnung und我的 Stripe-Einnahmen für die TanStack Ship-basierten Apps, die ich betreibe. Hier die monatlichen Kosten für eine Produktions-SaaS bei ca. 100k Requests, ca. 5k aktiven Usern, ca. 2.800 $ MRR:

Die Differenz von 65 $/Monat ist der Unterschied zwischen Break-even und einem Gehalt bei den ersten 100 zahlenden Kunden. Bei 1M monatlichen Requests vergrößert sich die Lücke auf ca. 200 $/Monat, weil Cloudflare-Egress bei 0 $ bleibt, während Vercels Edge-Function-BillingRough linear mit den Aufrufen wächst.

Das Preismodell von TanStack Ship ist eine Einmallizenz von 149 $ —Rough zwei Monate der Cloudflare-Kostendifferenz. Sparen Sie ein Wochenende beim Debugging der Stripe-Webhook-Idempotenz, und der ROI ist ab Tag eins positiv.

Ich bin bewusst konservativ. Die veröffentlichten Cloudflare Workers pricing listen den Bezahlplan bei 5 $/Monat mit 10M Requests. Bei 50M Requests/Monat sind Sie im 25–50 $-Workers-Bereich, und der Next.js + Vercel-Stack liegt näher bei 100–150 $.

Who TanStack Ship Is For (and Who It Isn't)

Jeder Boilerplate-Beitrag sollte eine Passform-Sektion enthalten, also hier meine.

TanStack Ship ist eine starke Wahl, wenn Sie:

• Ein Solo-Entwickler oder Zwei-Personen-Team sind, das End-to-End-typsicheres React auf einem serverlosen Budget will
• Sich mit TanStack Router auskennen oder bereit sind, es zu lernen (die Typegen dauert einen Morgen)
• Eine SaaS deployen, die Stripe + eine echte Admin-Shell + mindestens einen Growth-Loop ab Tag eins braucht
• Sich im Cloudflare-Ökosystem (Workers, D1, R2, Queues) wohlfühlen

TanStack Ship ist die falsche Vorlage, wenn Sie:

• Ein nicht-technischer Gründer sind — versuchen Sie stattdessen Makerkit oder Wasp
• Ein Team sind, das auf Next.js + Vercel + Postgres standardisiert ist und nicht umschulen will — ShipFast ist die richtige Wahl
• Eine rein Content-basierte Seite ohne Commerce-Layer bauen — die TanStack Start docs allein reichen aus
• Eine regulierte Workload betreiben (HIPAA, PCI-DSS Level 1) — prüfen Sie die Cloudflare compliance docs, bevor Sie annehmen, dass der Edge passt

Ich habe auch Teams erlebt, die TanStack Ship gekauft haben in der Erwartung von „einer SaaS in der Box" und dann merkten, dass sie trotzdem ihre Kernfunktionalität schreiben mussten. TanStack Ship ist die Foundation und die Business-Layer — Auth, Billing, Growth, Admin. Ihre Produktlogik ist immer noch Ihre Aufgabe.

Closing — Try the Production Stack

Der schnellste Weg herauszufinden, ob TanStack Ship zu Ihrer SaaS passt: Klonen Sie es, führen Sie pnpm install aus und versuchen Sie, den Stripe-Webhook-Handler lokal mit stripe trigger checkout.session.completed zu brechen. Wenn die Idempotenz-Prüfung hält und das MRR-Dashboard sich innerhalb einer Sekunde aktualisiert, haben Sie dieselbe Foundation, die ich täglich shippe.

Für die vollständige Modulliste sehen Sie den TanStack Ship features index oder springen Sie zur pricing page. Für die Trace, die mich davon überzeugt hat, idempotente Webhook-Handhabung als Standard zu shippen, führt die Stripe webhook duplicate delivery writeup durch.

Das SaaS-Template-Markt 2026 ist gesünder als je zuvor — ShipFast, Makerkit, Open-SaaS, Turbostarter und TanStack Ship sind allesamt echte, produktionsgetestete Optionen. Wählen Sie diejenige, deren Opinions zu denjenigen passen, die Sie drei Jahre lang vertreten werden. Für mich ist das TanStack Start + Cloudflare Workers + Stripe + eine 14-Module-Foundation, die ich nicht jedes Mal neu bauen muss.