Geschrieben von Huifer, Solo-Entwickler und Maintainer von TanStack Ship. Ich habe TanStack Ship im Mai 2024 auf React Router v6 veröffentlicht, migrierte es im dritten Quartal 2024 auf TanStack Router und habe seitdem denselben Wechsel für sechs Kundenprojekte durchgeführt (eines davon ein B2B-SaaS mit 137 Routen). Die am häufigsten gestellte Frage von Gründern, die TanStack Ship evaluieren, lautet: „Was kostet die TanStack-Router-Adoption eigentlich — und lohnt es sich?" Dieser Beitrag ist die kostenbasierte Antwort, basierend auf diesen sechs Migrationen, mit Verweisen auf die TanStack Ship Trial und das Live-Demo am Ende jedes Abschnitts.
Verifizierte Quellen: TanStack Router docs · React Router docs · TanStack Start docs · Cloudflare Workers docs · Vite docs · TypeScript docs · TanStack Router GitHub · Cloudflare D1 docs Letzte Aktualisierung: 2026-05-17 · Changelog
TL;DR: TanStack Router für SaaS kostet zwischen 0 Stunden (Greenfield über TanStack Ship) und ~95 Stunden/Jahr, wenn Sie bei untyped React Router v6 bleiben. Dieser Beitrag bildet die 6 Migrationspfade ab, die ich durchlaufen habe, beziffert die Kosten pro Route und zeigt, wie TanStack Ship die günstigste Adoption vorgibt: eine 47-Routen-Baseline mit bereits verdrahtetem TanStack Router, TanStack Query, Better Auth, Stripe und D1. Greenfield ist kostenlos, inkrementell ist günstig, eine vollständige Neuschreibung ist erst ab 80+ Routen gerechtfertigt.
Möchten Sie es sehen, bevor Sie sich entscheiden? Öffnen Sie die TanStack Ship Live-Demo — TanStack Router + TanStack Start + das 47-Routen-Beispiel-SaaS, keine Installation erforderlich.
Was „Adoption Cost" 2026 wirklich bedeutet
Die Adoption Cost für einen Router ist keine Lizenzgebühr — es gibt keine Lizenz. Die Kosten sind Engineering-Stunden, und Engineering-Stunden sind der teuerste Posten im Early-Stage-SaaS.
Direkte Stunden: Code-Umschreibungen, Route-Tree-Wiederaufbau, Type-Narrowing
Direkte Stunden erscheinen auf dem Sprint-Board. Für eine 50-Routen-React-Router-v6-Codebasis, die auf TanStack Router umsteigt, liegen die direkten Kosten durchschnittlich bei 2,4 Stunden pro Route. Eine einfache useParams()-Migration liegt bei 1,4 Stunden pro Route; eine mit 6+ Suchparametern und pro-Route-Meta-Tags liegt bei 3,6 Stunden pro Route.
Indirekte Stunden: Type-Error-Debugging, Suchparameter-Drift, Refactor-Steuer
Indirekte Stunden erscheinen nicht auf dem Sprint-Board, kompensieren aber über Jahre. Vor der TanStack-Router-Adoption hatte meine TanStack-Ship-Codebasis in drei Monaten drei Production-Bugs geliefert — useParams() gab string | undefined statt string zurück, mit der Assertion innerhalb einer Leaf-Komponente. Jeder Bug kostete ~6 Stunden zur Behebung. Nach der Migration im dritten Quartal 2024 verschwanden diese Bugs, weil das Type-Narrowing zur Compile-Zeit stattfindet. Über ein Jahr hinweg kompensieren sich indirekte Stunden auf ~95 Stunden/Jahr für ein 50-Routen-SaaS.
Risikostunden: Routing-Regressionen und aufgeschobene Typed-Route-Bugs
Risikostunden erscheinen als 2-Uhr-nachts-Page. Eine schlechte Migration liefert eine Route aus, die kompiliert, aber die falsche Komponente rendert, oder verliert einen Suchparameter-Wert, oder lässt Meta-Tags bei der Hydration weg. Der TanStack Router Migrations-Guide schreibt vor, zuerst Leaves zu migrieren — zwei meiner sechs Migrationen haben das übersprungen und in Woche eins einen P0 geliefert.
Die 6 Migrationspfade, die ich im Benchmark verglichen habe
Über sechs Migrationen und die TanStack Ship 47-Routen-Baseline hinweg sind hier die Pfade und ihre gemessenen Kosten.
Pfad 1: React Router v6 → TanStack Router (inkrementell)
Der häufigste Ausgangspunkt. TanStack Router unterstützt die parallele Installation mit dem Vite-Plugin (router-plugin docs). Durchschnittliche Kosten: 1,4–2,4 Stunden pro Route plus ~6 Stunden einmalige Einrichtung. Die 50-Routen-TanStack-Ship-Codebasis dauerte ~120 Stunden über 6 Arbeitstage.
Pfad 2: Next.js App Router → TanStack Start (vollständige Neuschreibung)
Nur gerechtfertigt, wenn Sie Vercel verlassen. Das Server-Components-Modell des App Routers lässt sich nicht sauber auf TanStack Routers loader/head-Primitiven abbilden. Durchschnittliche Kosten: 3,8 Stunden pro Route. Die eine vollständige Neuschreibung, die ich durchgeführt habe, war ein 92-Routen-B2B-SaaS, dauerte ~350 Stunden über 12 Wochen und erzielte eine LCP-Verbesserung von 28 % (Lighthouse docs).
Pfad 3: Remix v2 → TanStack Start (vollständige Neuschreibung)
Der sauberste Neuschreibungspfad, weil Remixes loader/action-Modell fast direkt auf TanStacks createServerFn abbildbar ist. Durchschnittliche Kosten: 2,6 Stunden pro Route. Die 64-Routen-Neuschreibung, die ich durchgeführt habe, dauerte ~165 Stunden über 4 Wochen. Abwägung: Sie verlieren Remixes FormData-Progressive-Enhancement-Story, es sei denn, Sie verdrahten es manuell.
Pfad 4: SolidStart → TanStack Start (Cross-Framework-Port)
Nischenfall. Zwei Kunden hatten ein SolidStart-MVP, das einen React-basierten Einstellungspfad benötigte. Cross-Framework-Port-Kosten: 5,2 Stunden pro Route, weil Komponenten-Bäume umgeschrieben werden müssen. Nur lohnend bei 25+ Routen mit dokumentierter Einstellungsbeschränkung.
Pfad 5: Greenfield (keine Migrationskosten)
Null Migrationskosten. Starten Sie mit TanStack Router ab Zeile 1. Die TanStack Ship 47-Routen-Sample-SaaS-Baseline ist das kanonische Beispiel — Auth, Stripe, Admin, Blog, UTM, i18n sind bereits verdrahtet. Die Trial gibt Ihnen diese Baseline für $149.
Pfad 6: Express/Fastify SPA → TanStack Router (Shell-Injection)
Selten. Ein Kunde hatte eine 180-Routen-Express-Server-rendered SPA auf EJS-Templates. Wir haben die Express-Shell in Ruhe gelassen und eine TanStack-Router-App unter /app/* gemountet. Kosten: 1,8 Stunden pro Route plus 12 Stunden Shell-Injection-Einrichtung.
Kosten pro Route: Stunden nach Codebasis-Größe
Die Variable, die am meisten zählt, ist Routen, nicht Codezeilen. Ein 100k-Zeilen-SaaS mit 30 Routen ist günstiger zu migrieren als ein 30k-Zeilen-SaaS mit 80 Routen, weil jede Route eine handgetippte Einheit von Risiko ist.
| Codebasis-Größe | Pfad 1 (React Router v6) | Pfad 2 (Next.js) | Pfad 3 (Remix) | Pfad 5 (Greenfield) |
|---|---|---|---|---|
| 25 Routen | 35–60 Std. | 95 Std. | 65 Std. | 0 Std. (hier starten) |
| 50 Routen | 70–120 Std. | 190 Std. | 130 Std. | 0 Std. |
| 100 Routen | 140–240 Std. | 380 Std. | 260 Std. | 0 Std. |
| 150 Routen | 210–360 Std. | 570 Std. | 390 Std. | 0 Std. |
Die rechte Spalte ist die TanStack Ship-Antwort: Migration komplett überspringen, indem Sie auf der vorkonfigurierten 47-Routen-Baseline starten. Für einen direkten Vergleich mit ShipFast, lesen Sie TanStack Ship vs ShipFast; für die Framework-Debatte, lesen Sie TanStack Start vs Next.js vs Remix.
Wo sich die versteckten Kosten verstecken
Drei versteckte Kosten, die die meisten Teams zusätzlich zu den direkten Stunden übersehen:
- Zod-Schemata für Suchparameter. Ein Preisfilter mit 5 Suchparametern fügt ~1,2 Stunden über einer Route ohne hinzu.
- Meta-Tag-Migration.
react-helmet-async-Aufrufe innerhalb von Leaf-Komponenten werden zu typisiertenhead()-Aufrufen. Kosten pro Route: ~0,6 Stunden, kumulierend über jede Seite. - CI-Regressionstest-Umschreibungen. Routing-Tests, die
useParamsmocken, müssen gegen TanStack Routers Loader-Vertrag neu gemockt werden. ~3 Stunden pro Routengruppe.
Summiert über ein 50-Routen-SaaS fügen versteckte Kosten weitere ~40 Stunden oben drauf hinzu.
Adoption-Entscheidungsmatrix (4-Gründer-Profile)
Die Antwort auf die Frage „Sollten wir TanStack Router für SaaS adoptieren?" hängt von Greenfield vs. Brownfield, Codebasis-Größe, Teamgröße und Routing-Komplexität ab:
Solo-Gründer, MVP, keine Codebasis
→ Pfad 5 (Greenfield über TanStack Ship)
→ Kosten: $149 einmalig, keine Migrationsstunden
2–3 Personen Team, post-PMF SaaS, 25–50 Routen
→ Pfad 1 (inkrementell, zuerst Leaves)
→ Kosten: 70–120 Std. + 40 Std. versteckt
10+ Ingenieure, Multi-App, 100+ Routen
→ Pfad 2 oder 3 (vollständige Neuschreibung mit Pilot)
→ Kosten: 260–380 Std. + 100 Std. versteckt
Enterprise mit Custom Auth/RBAC, 80+ Routen
→ Pfad 6 (Shell-Injection)
→ Kosten: 145–270 Std. + 60 Std. versteckt
Wann jedes Profil NICHT adoptieren sollte
TanStack Router ist nicht für jeden.
- React Native-Parität benötigt bis Q3 2026 → bleiben Sie bei React Router v6. TanStack Routers native Story ist laut TanStack Router GitHub noch in Entwicklung.
- Remix-basiertes Marketing + Produkt-Site mit tiefen Remix-v2-Features → bleiben Sie bei Remix. Die Migrationsmathematik geht unter 60 Routen nicht auf.
- Nicht-TypeScript-Site, weniger als 15 Routen → React Router v6 ist ausreichend.
Für jedes andere Profil — insbesondere TypeScript SaaS bei 25+ Routen — amortisiert sich die TanStack-Router-Adoption innerhalb von 18 Monaten.
Das Pilotmuster, das Adoption entRisikiert
Bevor Sie sich auf eine 240-Stunden-Migration festlegen, führen Sie einen 2-Wochen-Piloten auf 5 Routen End-to-End durch. Wenn diese Routen mit typsicheren Params, validierten Suchparameter-Schemata und pro-Route-Meta-Tags ausgeliefert werden, haben Sie einen Beweis. Wenn nicht, braucht Ihr Team mehr Framework-Einarbeitung, bevor Sie sich festlegen. Zwei meiner sechs Migrationen haben diesen Pilot übersprungen; beide hatten Rework-Wochen.
Vorkonfigurierte Adoption — TanStack Ships 47-Routen-Baseline
Der günstigste Pfad durch die Matrix ist Pfad 5 mit TanStack Ship: ein vorkonfiguriertes 47-Routen-SaaS mit TanStack Router + TanStack Start + Better Auth + Stripe + D1 + UTM + i18n, alles bereits konfiguriert. Die Preisseite listet jedes Modul auf; die Kurzversion: Migrationskosten aus der Matrix oben sind null.
Was standardmäßig ausgeliefert wird
Die 47-Routen-Baseline deckt SaaS-Routen des ersten Jahres ab: Auth, Stripe, Admin (Benutzerliste, MRR-Dashboard, Datei-Browser), Blog (MDX, i18n, JSON-LD) und Growth-Tools (UTM-Capture → Cookie-Persistenz → ROI-Dashboard). Typisierte head()-Funktionen sind auf jeder Route vorhanden. Typisierte Suchparameter-Zod-Validatoren sind auf jeder Filter-Seite vorhanden. Die Cloudflare-Workers-wrangler.jsonc wird mit bereits konfigurierten D1 + R2 + Queues-Bindings ausgeliefert. Die Live-Demo führt die Baseline im Stripe-Testmodus aus.
Wie Vorkonfiguration 95 Stunden/Jahr einspart
Die 95-Stunden/Jahr-Zahl von vorhin ist die indirekte Kosteneinsparung durch TanStack Routers typisierten Vertrag. TanStack Ship senkt das weiter, indem es den typisierten Vertrag auf jeder Route vorschreibt — Sie schreiben nie head() oder validateSearch von Grund auf. Die Vorkonfiguration spart geschätzte ~110 Stunden/Jahr an indirekten Kosten relativ zu einer handgerollten TanStack-Router-App.
Was TanStack Ship nicht löst
TanStack Ship ist das Boilerplate, nicht das Hosting. Sie zahlen weiterhin die Cloudflare-Workers-+-D1-+-R2-Rechnung; Sie pflegen weiterhin das Stripe-Konto; Sie schreiben weiterhin Ihre eigene Geschäftslogik. Die vollständige Feature-Aufschlüsselung finden Sie im Compare-Hub.
Code: typisierte Route-Params in TanStack Router
Die eine Zeile, die Ihnen die Typsicherheit bringt. Aus den TanStack Router Docs:
import { createFileRoute } from "@tanstack/react-router"
export const Route = createFileRoute("/billing/$subscriptionId")({
loader: async ({ params }) => {
// params.subscriptionId ist als string typisiert, nicht string | undefined
return await getSubscription(params.subscriptionId)
},
component: BillingPage,
})
function BillingPage() {
const { subscriptionId } = Route.useParams()
// subscriptionId ist als string typisiert, keine Assertion nötig
}
In React Router v6 erfordert derselbe Code ein manuelles Generic auf useParams<{ subscriptionId: string }>() und gibt zur Laufzeit trotzdem string | undefined zurück — genau das Bug-Muster, das vor der Migration drei P0s in TanStack Ship verursacht hat.
FAQ
Wie lange dauert die TanStack-Router-Adoption für ein 50-Routen-SaaS? Pfad 1 (inkrementell von React Router v6): 70–120 Stunden direkte Arbeit plus ~40 Stunden versteckte Kosten. Pfad 5 (Greenfield über TanStack Ship): null — die 47-Routen-Baseline wird vorkonfiguriert ausgeliefert. Siehe die Trial.
Was kostet die Adoption in Dollar? Direkte Kosten: $0 (TanStack Router ist MIT-lizenziert). Indirekte Kosten: Engineering-Stunden × Stundensatz. Für ein 50-Routen-Brownfield bei $80/Stunde sind das ~$9.600. Für ein Greenfield auf TanStack Ship die $149-Lizenz und null Routing-Layer-Stunden.
Ist TanStack Router 2026 produktionsreif?
Ja. Die Dokumentation deckt File-based Routing, typisierte Loader, typisierte head(), Zod-validierte Suchparameter, Code-Splitting, parallele React-Router-Migration und Cloudflare-Workers-Deployment ab. Die Live-Demo ist ein Produktionsbeispiel.
Kann ich React-Router-v6-Routen während der Migration behalten? Ja. Das Parallel-Installationsmuster hält beide Router in derselben Vite-Konfiguration. Zwei meiner sechs Migrationen haben es End-to-End genutzt; beide haben null Downtime ausgeliefert.
Wann sollte ich TanStack Router NICHT adoptieren? React Native-Parität benötigt vor Q3 2026 (TanStack Router native in Entwicklung); Remix-basierte Site mit tiefer Progressive Enhancement; Nicht-TypeScript-Site unter 15 Routen.
Der günstigste Adoptionspfad
Für einen SaaS-Gründer, der sich 2026 für TanStack Router entscheidet, lautet die Antwort: Pfad 5 mit TanStack Ship — starten Sie auf der 47-Routen-vorkonfigurierten Baseline, überspringen Sie die Migrationskosten und sichern Sie sich die 95-Stunden/Jahr-indirekten Einsparungen ab Tag eins. Für einen Brownfield-Gründer führen Sie den 2-Wochen-Piloten auf 5 Routen durch, dann adoptieren Sie Pfad 1 inkrementell. Die Kostenmathematik funktioniert in beide Richtungen; die falsche Entscheidung ist die unbezifferte.
TanStack Ship ausprobieren · Live-Demo öffnen · Vollständige Modulliste ansehen