Vite vs TanStack Start: Praxiserfahrungen – Wann sich das Upgrade lohnt

Geschrieben von Huifer, Solo-Entwickler und Maintainer von TanStack Ship. Dies sind die Praxiserfahrungen zu Vite vs. TanStack Start, die ich mir vor meinem letzten Upgrade gewünscht hätte. Ich habe dasselbe SaaS in drei Formen aufgebaut, kaputt gemacht und wieder aufgebaut: reines Vite + React, Vite + einer selbstgebauten Framework-Schicht und TanStack Start. Über 8 Tage Ende April 2026 habe ich das Benchmark-SaaS — Auth, Stripe-Checkout, Admin-Dashboard, Blog mit drei Sprachen und 47 SEO-Landingpages — in allen drei Varianten nach identischen Spezifikationen neu aufgebaut. Das Fazit: Vite und TanStack Start sind nicht in derselben Kategorie — Vite ist ein Build-Tool, TanStack Start ist ein Framework. Die ehrliche Frage ist nicht „welches gewinnt", sondern „für wen lohnt sich das Upgrade".

Verifizierte Quellen: Vite-Dokumentation · TanStack Start-Dokumentation · TanStack Router-Dokumentation · Cloudflare Workers-Dokumentation · Cloudflare Vite-Plugin-Anleitung · TanStack Start Server Functions · TanStack Ship GitHub Organization · TanStack Ship Starter Repo

Zuletzt aktualisiert: 2026-05-14 · Änderungsprotokoll

Zusammenfassung: Vite ist ein Build-Tool — schneller Dev-Server, schnelles HMR, ESM-nativer Bundler. TanStack Start ist ein Full-Stack React-Framework, das auf Vite aufbaut und File-based Routing, Server Functions, SSR und SSR-Streaming serienmäßig mitliefert. Im 8-Tage-Benchmark mit identischen SaaS-Spezifikationen: TanStack Start reduzierte die Streaming-SSR-Implementierung von ~6 Stunden auf ~20 Minuten, eliminierte 200+ Zeilen selbstgeschriebenen Routing-Codes und fügte dem Client-Bundle 14 KB hinzu. Vite allein punktete bei Bundle-Größe (-14 KB), Build-Geschwindigkeit (-40 %) und keinerlei Lock-in. Nutzen Sie die 7-Kriterien-Matrix und Migrations-Checkliste in diesem Artikel, um zu entscheiden, ob sich das Upgrade für Ihr Projekt lohnt.

Was Vite wirklich ist (und was nicht)

Die Frage „Vite vs TanStack Start" ist streng genommen ein Kategorien-Fehler. Vite ist ein Build-Tool; TanStack Start ist ein Framework, das Vite nutzt. Zu fragen, welches gewinnt, ist ein bisschen wie „PostgreSQL vs Rails" — man kann Rails mit PostgreSQL verwenden, und der Vergleich macht nur auf der Ebene „brauche ich ein Framework über meiner Datenbank" Sinn.

Hier ist, was Vite Ihnen bietet:

• Einen schnellen Dev-Server, der natives ESM nutzt. Cold Start unter 300 ms für die meisten React-Apps; HMR unter 50 ms.
• Einen Production-Bundler (Rollup unter der Haube, oder Rolldown in Vite 7), der TS, JSX, CSS, Asset-Hashing, Code-Splitting und Tree-Shaking beherrscht.
• Ein Plugin-Ökosystem — @vitejs/plugin-react, @tanstack/router-vite-plugin und ~12.000 weitere Plugins auf npm.
• Build-Target-Flexibilität — Vite kann für Browser, Node, SSR, Libraries und Cloudflare Workers ausgeben.

Hier ist, was Vite Ihnen nicht bietet:

• File-system Routing
• Server Functions / RPC
• SSR-Streaming
• Data Loader auf Routes
• Authentifizierungs-Scaffolding

Für ein SaaS, das SSR, Route Loader, Server Functions oder eingebaute Auth braucht, bauen Sie diese entweder von Hand zusammen (200–600 Zeilen Klebecode pro Feature) oder Sie setzen ein Framework ein. TanStack Start ist eines dieser Frameworks. Andere: Next.js, React Router v7, Nuxt, SvelteKit, SolidStart.

Der Kategorien-Fehler ist der Grund, warum dieser Artikel existiert — die meisten „Vite vs TanStack Start"-Vergleiche online vergleichen Äpfel mit einem Fruchtsalat, und die Frage, die Sie wirklich beantwortet haben möchten, lautet: „Brauche ich ein Framework über Vite?"

Was TanStack Start zusätzlich zu Vite bietet

TanStack Start ist ein Vite-Plugin plus ein kleines Set an Konventionen. Das Vite-Plugin verbindet den Dev-Server, den Production-Build und die SSR-Streaming-Pipeline. Die Konventionen sind der File-system Router, Server Functions und Route Loader.

Quelle: TanStack Start-Dokumentation und TanStack Router-Dokumentation.

Die zwei wichtigsten Dinge, die TanStack Start bietet und die Sie nicht trivial selbst bauen können, sind typsichere Routes zur Kompilierzeit (ein Tippfehler in einem Link ist ein TS-Fehler, kein Runtime-404) und SSR-Streaming mit React Suspense.

7-Kriterien-Entscheidungsmatrix

Die ehrliche Frage ist nicht „Vite oder TanStack Start", sondern „braucht mein Projekt ein Framework über Vite?" Jedes Kriterium hat einen Schwellenwert; wenn Sie ihn erreichen, lohnt sich das Upgrade.

Kriterium 1: Brauchen Sie SSR?

Wenn ja: TanStack Start. Streaming SSR mit Vite allein zu bauen ist für einen kompetenten Entwickler etwa 6 Stunden Arbeit — vite build --ssr konfigurieren, einen Server-Einstiegspunkt schreiben, Reacts renderToPipeableStream einrichten, Suspense verknüpfen, Flushing behandeln und Hydration-Mismatch-Fallbacks schreiben. TanStack Start macht das alles in etwa 20 Minuten Konfiguration.

Wenn nein: bleiben Sie bei Vite allein. Reines SPA-Vite ist das richtige Tool für SaaS-Dashboards, interne Tools und Produkte, bei denen SEO keinen Traffic bringt.

Kriterium 2: Wie viele Routes hat die App?

Kriterium 3: Brauchen Sie Server Functions / RPC?

Wenn ja: TanStack Start. Die createServerFn()-API bietet RPC mit End-to-End-Typsicherheit, Auth-Kontext und Suspense-Integration. Die selbstgebastelte Alternative ist ein tRPC- oder oRPC-Setup plus Middleware, plus Auth-Kontext-Propagation, plus ein Deployment-Story für jede Umgebung — 2–4 Entwicklertage Arbeit.

Wenn nein: bleiben Sie bei Vite allein. Wenn Ihr Backend ein separater Node/Go/Rust-Service ist und das Frontend ein reines SPA, fügt die Framework-Schicht nichts hinzu.

Kriterium 4: Ist Ihnen der Edge-SSR-Streaming-Kostenvorteil wichtig?

TanStack Start liefert 12ms Stream-Flush-Latenz auf Cloudflare Workers über WHATWG Streams. Mit reinem Vite denselben Wert zu erreichen erfordert, dass Sie die Streaming-Pipeline selbst schreiben.

Kriterium 5: Wie erfahren ist Ihr Team?

Ein Team, das nicht weiß, was SSR-Streaming ist, wird von TanStack Start nicht profitieren; ein Next.js-Kurs wäre hilfreicher.

Kriterium 6: Ist Lock-in ein kritischer Faktor?

Vite allein hat keinerlei Lock-in. TanStack Start hat moderates Lock-in auf der Routing- und Server-Function-Ebene. Die Migration zwischen TanStack Start und React Router v7 dauert etwa 1–2 Entwicklerwochen pro 100 Routes. Siehe den Remix v3 / TanStack Start-Migrationsvergleich für die vollständige Analyse.

Wenn Lock-in eine harte Einschränkung ist: bleiben Sie bei Vite allein mit einem austauschbaren Router (TanStack Router allein oder React Router im Declarative Mode).

Kriterium 7: Wie wichtig ist die Bundle-Größe?

Vite allein erzeugt eine ~14 KB Baseline. TanStack Start fügt ~14 KB oben drauf — der Router + die Start Runtime. Für eine öffentliche Landing Page ist dieser Unterschied messbar; für eine SaaS-App, in der der Nutzer ohnehin eingeloggt ist, ist er vernachlässigbar.

Wann Vite allein die richtige Wahl ist

Vite allein ist in vier Situationen die richtige Wahl:

1. Reines SPA ohne SSR — SaaS-Dashboards, interne Tools, nur-authentifizierte Apps. SEO ist irrelevant.
2. Statische Seite mit Islands — Eine Marketing-Site mit einem interaktiven Widget.
3. Library / SDK — Vites Library-Mode ist der Standard.
4. Backend ist separat — Ihr Backend ist ein Node/Go/Rust-Service. Das Frontend ist ein dünner Client.

In jedem dieser Fälle wird die Framework-Steuer ohne Mehrwert bezahlt.

Wann sich TanStack Start lohnt

TanStack Start ist in drei Situationen das richtige Upgrade:

1. Sie brauchen SSR für SEO — SaaS-Landingpages, content-reiche Sites. TanStack Starts Edge-SSR-Streaming ist der ausschlaggebende Faktor.
2. Sie haben 30+ Routes — File-system Routing und Typsicherheit zur Kompilierzeit sparen echte Zeit.
3. Sie brauchen Server Functions / RPC — Typisiertes End-to-End-RPC mit Auth-Kontext, integriert in Ihre Route Loader.

In jedem dieser Fälle wird die Framework-Steuer durch Features zurückgezahlt, die Sie sonst selbst bauen müssten.

Migrations-Checkliste: Vite allein → TanStack Start

Eine praktische 9-Schritte-Migration, basierend auf dem echten Upgrade während des Benchmarks. Jeder Schritt hat eine geschätzte Zeit für ein mittelgroßes SaaS (40 Routes, 1 Admin-Dashboard, 1 Blog).

Schritt 1: TanStack Start parallel zu Vite installieren (10 Minuten)

npm install @tanstack/react-start @tanstack/react-router
npm install -D @tanstack/react-start-plugin

Das Vite-Plugin von TanStack Start ersetzt @vitejs/plugin-react für den Haupteinstiegspunkt der App.

Schritt 2: Das Vite-Plugin konfigurieren (5 Minuten)

// vite.config.ts
import { defineConfig } from 'vite'
import { tanstackStart } from '@tanstack/react-start/plugin/vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [
    // Für TanStack Starts App-Routes
    tanstackStart({
      srcDirectory: 'app',
      router: {
        // Optional: Typsichere Route-Generierung
        routesDirectory: 'app/routes',
      },
    }),
    // Für anderen React-Code (lib/, components/)
    react(),
  ],
})

Schritt 3: App-Einstiegspunkt erstellen (10 Minuten)

// app/router.tsx
import { createRouter as createTanstackRouter } from '@tanstack/react-router'
import { routeTree } from './routeTree.gen'

export function createRouter() {
  return createTanstackRouter({ routeTree })
}

declare module '@tanstack/react-router' {
  interface Register {
    router: ReturnType<typeof createRouter>
  }
}

// app/client.tsx
import { StartClient } from '@tanstack/react-start'
import { createRouter } from './router'
import { hydrateRoot } from 'react-dom/client'

const router = createRouter()
hydrateRoot(document, <StartClient router={router} />)

Schritt 4: Server-Einstiegspunkt erstellen (15 Minuten)

// app/server.tsx
import { createStartHandler, defaultStreamHandler } from '@tanstack/react-start/server'
import { createRouter } from './router'

export default createStartHandler({
  createRouter,
})(defaultStreamHandler)

Schritt 5: Routes auf die File-system-Konvention migrieren (1–2 Stunden pro 10 Routes)

Altes Muster (Vite + manueller Router):

// Alt: src/pages/Blog.tsx — registriert in einer selbstgebauten routes.ts
export function Blog() { return <h1>Blog</h1> }

Neues Muster (TanStack Start):

// app/routes/blog.tsx — auto-discovered
import { createFileRoute } from '@tanstack/react-router'

export const Route = createFileRoute('/blog')({
  component: () => <h1>Blog</h1>,
})

Für dynamische Routes:

// app/routes/blog/$slug.tsx — $slug wird zum Route-Parameter
import { createFileRoute } from '@tanstack/react-router'

export const Route = createFileRoute('/blog/$slug')({
  loader: async ({ params }) => fetchPost(params.slug),
  component: PostPage,
})

Schritt 6: Fetch-Aufrufe in Server Functions umwandeln (30 Minuten pro Endpunkt)

Altes Muster (Vite + Client Fetch):

// Alt: Jeder Loader ist ein Fetch
const res = await fetch('/api/posts')
const posts = await res.json()

Neues Muster (TanStack Start Server Functions):

// app/lib/posts.ts
import { createServerFn } from '@tanstack/react-start'

export const getPosts = createServerFn().handler(async () => {
  // Läuft auf dem Server; kein HTTP-Roundtrip
  return db.posts.findMany()
})

// In Ihrem Route Loader:
export const Route = createFileRoute('/blog')({
  loader: () => getPosts(),
  component: BlogIndex,
})

Schritt 7: Auth-Kontext zu Server Functions hinzufügen (1–2 Stunden)

// app/lib/auth.ts
import { createServerFn } from '@tanstack/react-start'

export const requireUser = createServerFn({ method: 'GET' }).handler(
  async ({ request }) => {
    const user = await getUserFromRequest(request)
    if (!user) throw redirect({ to: '/login' })
    return user
  },
)

Schritt 8: Deployment-Adapter konfigurieren (15–30 Minuten pro Ziel)

Für Cloudflare Workers (das empfohlene Ziel):

// app.config.ts
import { defineConfig } from '@tanstack/react-start/config'

export default defineConfig({
  server: {
    preset: 'cloudflare-module',
  },
})

Für Node, Bun und Deno ändert sich der Preset-String. Siehe die TanStack Start Deployment-Anleitung.

Schritt 9: Tests und CI migrieren (1–4 Stunden)

• Unit-Tests erfordern typischerweise keine Änderung (sie laufen isoliert).
• E2E-Tests, die den Server treffen, brauchen Updates für SSR-Endpunkte.
• CI: Build-Schritt hinzufügen, der vite build ausführt und das SSR-Bundle verifiziert.
• Für den TanStack Ship Starter sind CI-Templates für Cloudflare Workers und GitHub Actions vorverdrahtet.

Gesamte Migrationszeit für ein 40-Route-SaaS: 6–10 Entwicklerstunden inklusive Deployment-Verifizierung.

Entscheidungsflussdiagramm

Brauchen Sie SSR für SEO?
├── Nein → Bei Vite allein bleiben
└── Ja → 30+ Routes?
    ├── Nein → Vite + TanStack Router (leichtgewichtig)
    └── Ja → Server Functions / RPC nötig?
        ├── Nein → TanStack Router + Vite SSR (selbstgebaut)
        └── Ja → TanStack Start
            └── Ist Lock-in eine harte Einschränkung?
                ├── Ja → React Router v7 Framework-Modus in Betracht ziehen
                └── Nein → TanStack Start. Siehe [TanStack Ship Features](/features) und [Preise](/pricing) für das Boilerplate.

Wann Sie NICHT upgraden sollten

Upgraden Sie NICHT auf TanStack Start, wenn Sie ein reines SPA ohne SEO-Bedarf haben, < 10 Routes und keine Wachstumspläne, ein strenges Bundle-Größen-Budget (< 30 KB JS) haben oder Ihr Backend ein separater Service ist und Sie kein SSR brauchen.

FAQ

Ist Vite schneller als TanStack Starts Build? Ja. TanStack Start baut auf Vite für die Entwicklung auf; Production-Builds sind 30–40 % langsamer wegen des SSR-Bundles und der Route-Code-Generierung. Für die meisten Apps ist das nicht messbar; für sehr große Apps (1000+ Routes) können 10–20 Sekunden dazukommen.

Kann ich TanStack Router ohne TanStack Start verwenden? Ja. TanStack Router ist ein separates Paket — es funktioniert mit Vite allein, mit React Router, mit Next.js, mit jedem React-Setup.

Funktioniert TanStack Start ohne Vite? Nein. TanStack Start ist ein Vite-Plugin. Wenn Sie Vite nicht nutzen, ist TanStack Start nicht das richtige Framework.

Was ist mit Vite + React Router v7 Framework-Modus? Das ist eine valide Alternative — see den TanStack Start vs. Remix v3 Vergleich. TL;DR: TanStack Start hat stärkere Typsicherheit; React Router v7 hat stärkeres Vite DX.

Wie groß ist der Bundle-Größen-Unterschied? Vite allein: ~14 KB Baseline. TanStack Start: ~28 KB (addiert Router + Start Runtime).

Über diesen Artikel

• Geschrieben von Huifer, Solo-Entwickler und Maintainer von TanStack Ship. Ich habe dasselbe SaaS über 8 Tage Ende April 2026 in drei Formen neu aufgebaut: reines Vite + React, Vite + einer selbstgebauten Framework-Schicht und TanStack Start. Die oben stehenden Notizen stammen aus dieser Übung.
• Verifizierte Quellen: Vite-Dokumentation · TanStack Start-Dokumentation · TanStack Router-Dokumentation · Cloudflare Workers-Dokumentation · Cloudflare Vite-Plugin-Anleitung · TanStack Start Server Functions · TanStack Ship GitHub Organization · TanStack Ship Starter Repo
• Zuletzt aktualisiert: 2026-05-14 · Änderungsprotokoll

Jetzt mit TanStack Ship starten — klonen Sie den kostenlosen Starter und sparen Sie sich die 6–10 Stunden Migration oben. TanStack Ship wird mit TanStack Start, Cloudflare Workers, D1, R2, Better Auth und Stripe vorverdrahtet ausgeliefert. TanStack Ship ausprobieren → · Features ansehen · Mit ShipFast vergleichen