Geschrieben von Huifer, Solo-Entwickler und Maintainer von TanStack Ship. Ich habe 11 SaaS-Apps mit TanStack Start und 7 mit Plain React (Vite + React Router + tRPC + React Query) in 30 Monaten ausgeliefert. Die Frage „TanStack vs. Plain React" taucht in nahezu jeder Gründerschafts-DM auf. Die ehrliche Antwort ist nicht „TanStack gewinnt überall" und auch nicht „Plain React ist einfacher und schneller" – sie hängt von sechs Achsen ab, auf die ich mittlerweile jedes Projekt bewerte. Dieser Beitrag legt diese Achsen offen, benennt, wo jeder Stack tatsächlich gewinnt, und zeigt den Code, der darüber entscheidet.

Verifizierte Quellen: TanStack Router Documentation · TanStack Start Documentation · TanStack Query Documentation · TanStack Form Documentation · TanStack Table Documentation · React Router Documentation · React Documentation · Cloudflare Workers Documentation · TanStack Ship GitHub Organization Letzte Aktualisierung: 2026-05-22 · Changelog

TanStack vs Plain React: Was Ihnen die zusätzlichen Abstraktionen bringen

TL;DR: Plain React (Vite + React Router + eine manuelle Datenschicht) ist in der ersten Stunde schneller ausgeliefert und bleibt leichter. TanStack (Router + Start + Query + Form + Table) rentiert sich, sobald Sie etwa 10 Routen, ~3 Tabellen mit Sortierung oder ein mehrstufiges Formular erreichen. Die sechs Achsen unten – Typ-sichere Routing-Typisierung, Server Functions, Bundle-Größe, Formulare, Tabellen und AI-Editor-Kompatibilität – münden in eine Entscheidungsmatrix. Für Solo-SaaS-Auslieferung im größeren Maßstab gewinnt TanStack. Für Wochenend-Prototypen gewinnt Plain React weiterhin. TanStack Ship liefert die TanStack-Konfiguration vorgeschaltet aus.

Warum „TanStack vs. Plain React" immer wieder auftaucht

TanStack war früher eine einzelne Bibliothek (React Query). Heute ist es eine whole Bibliotheksfamilie – Router, Start, Query, Form, Table, Virtual, Store, Devtools –, gepflegt von Tanner Linsley und Contributors. Plain React bedeutet, was die meisten Teams verwenden: Vite, React Router, React Query, React Hook Form und eine handgerollte API-Schicht. Beide Stacks lösen denselben Problembereich und verteilen die Arbeit unterschiedlich.

Ich habe 11 Produktions-Apps auf TanStack Start und 7 auf Plain React ausgeliefert. Drei Plain-React-Apps sind zu TanStack migriert. Keine der TanStack-Apps ist zurückgewechselt. Auf dem TanStack Ship Blog und der Feature-Seite finden Sie den Pattern-Katalog.

Die 6 Achsen, auf die ich bewerte

Jeder „X vs. Y"-Vergleich ist nur dann nützlich, wenn die Achsen konkret sind. Hier sind die sechs, auf die ich jedes neue Projekt bewerte, benotet mit A–F gegen dieselbe Workload – Authentifizierung, Abrechnung, ein Admin-Panel mit zwei Tabellen und ein Blog.

Zahlen stammen aus echten Lighthouse-Runs und pnpm build-Ausgaben.

Achse 1: Typ-sichere Routing-Typisierung

TanStack gewinnt auf dieser Achse am deutlichsten. TanStack Router nutzt einen dateibasierten Routing-Baum, der Ende-zu-Ende typisierte Link, useParams und useNavigate erzeugt. Benennen Sie eine Route um, schlägt bei jedem Consumer die Kompilierung fehl. Die TanStack Router-Dokumentation nennt das „type-safe by default".

Plain React Router v7 bietet typisierte Routen hinter einem Config-Flag. In meiner Erfahrung aktivieren nur ~30 % der Teams diese Option. Der Rest schifft useParams<{ id: string }>()-Casts überall ein. Die Kosten bleiben unsichtbar, bis in Woche 8 ein Umbenennen einen halben Tag kostet.

TanStack Router: dateibasiert und Ende-zu-Ende typisiert

// app/routes/blog/$postId.tsx
import { createFileRoute } from "@tanstack/react-router"

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

function PostPage() {
  const { postId } = Route.useParams() // als string typisiert
  const post = Route.useLoaderData()     // als Post typisiert
  return <article>{post.title}</article>
}

Der Return-Typ des Loaders fließt zur Komponente, ohne manuelle Generics. postId in slug umzubenennen ist eine Ein-Datei-Änderung; der Rest kompiliert so lange nicht, bis jeder Consumer behoben ist.

Plain React Router v7: typisiert, aber Opt-in

import { useParams } from "react-router"

export default function PostPage() {
  const { postId } = useParams() // { postId?: string } | undefined
  return <Post id={postId ?? ""} />
}

Der Cast postId ?? "" ist das Problem. Jede useParams-Stelle macht denselben Tanz. Die React Router-Dokumentation dokumentiert das typed-routes-Flag, aber in der Praxis überspringen die meisten Apps es, weil die generierten Typen dem Dateibaum um einen Build hinterherhinken.

Achse 2: Server Functions und Datenfetching

TanStack Starts Server Functions sind der konkreteste zweite Achsen-Gewinn. Server Functions sind RPC-Style-Endpunkte in derselben Datei wie die Komponente, mit Ende-zu-Ende typisierten Args und Return-Werten. Die TanStack Start-Dokumentation nennt sie „functions, not routes".

Plain React hat zwei Patterns: tRPC und eine handgerollte REST/JSON-Schicht. Beide funktionieren. Beide fügen Boilerplate hinzu, das TanStack Start absorbiert.

TanStack Start Server Function

import { createServerFn } from "@tanstack/start"
import { z } from "zod"

export const fetchPost = createServerFn({ method: "GET" })
  .validator(z.object({ postId: z.string() }))
  .handler(async ({ data }) => {
    return db.posts.findUnique({ where: { id: data.postId } })
  })

Der Validator läuft auf dem Server. Der Handler läuft auf dem Server. Der Typ fließt zurück zur Komponente. Keine OpenAPI-Spezifikation zu pflegen.

Plain React + tRPC

// server/routers/posts.ts
export const postsRouter = router({
  byId: publicProcedure
    .input(z.object({ postId: z.string() }))
    .query(({ input }) => db.posts.findUnique({ where: { id: input.postId } })),
})

// client/lib/trpc.ts
export const trpc = createTRPCReact<AppRouter>()

Sie schreiben den Router, den typisierten Client und den Provider-Baum. Es ist gut begangenes Terrain; die TanStack Query-Dokumentation ist das, worauf sich tRPC für Caching stützt. Die Kosten sind die Schicht selbst: ein typisierter Client, der ein separates Installat von Ihrem UI ist.

Achse 3: Bundle-Größe und Cold Start

TanStack Start liefert in meinen Benchmarks ein kleineres initiale Bundle als Plain React + Vite + React Router + tRPC + React Query bei gleicher Feature-Parität. Server Functions collokalisieren Netzwerk-Code mit der Komponente, sodass es jenseits von TanStack Router kein Client-Router-SDK gibt.

Cold-Start-Zahlen, dieselbe SaaS deployed auf Cloudflare Workers im Mai 2026:

App-Level-Zahlen. Die Lücke von 48KB ist der tRPC-Client, der Provider-Baum und der doppelte Type-Gen-Schritt. Quelle: Cloudflare Workers Docs.

Achse 4: Formulare und Validierung

Formulare fressen Feature-Zeit. TanStack Form und React Hook Form bieten beide Typ-sichere Validierung, async Submission und Field Arrays. Der Unterschied ist die Integration: TanStack Form teilt einen Context mit TanStack Query, sodass ein optimistisches Update sich ohne manuelle Verdrahtung auf den Formular-State ausbreitet. React Hook Form ist unopinionated bezüglich Server-State und erwartet, dass Sie die Mutation selbst verdrahten.

TanStack Form mit geteiltem Query-State

import { useForm } from "@tanstack/react-form"
import { useMutation, useQueryClient } from "@tanstack/react-query"

export function NewPostForm() {
  const queryClient = useQueryClient()
  const create = useMutation({
    mutationFn: createPost,
    onSuccess: () => queryClient.invalidateQueries({ queryKey: ["posts"] }),
  })

  const form = useForm({
    defaultValues: { title: "", body: "" },
    onSubmit: async ({ value }) => create.mutateAsync(value),
  })

  return (
    <form onSubmit={(e) => { e.preventDefault(); form.handleSubmit() }}>
      <form.Field name="title" validators={{ onChange: z.string().min(3) }}>
        {(field) => <input value={field.state.value} onChange={field.handleChange} />}
      </form.Field>
      <button>Publish</button>
    </form>
  )
}

Plain React Hook Form + manuelle Verdrahtung

import { useForm } from "react-hook-form"
import { useMutation, useQueryClient } from "@tanstack/react-query"

export function NewPostForm() {
  const { register, handleSubmit } = useForm()
  const create = useMutation({
    mutationFn: createPost,
    onSuccess: () => queryClient.invalidateQueries({ queryKey: ["posts"] }),
  })

  return (
    <form onSubmit={handleSubmit((data) => create.mutate(data))}>
      <input {...register("title")} />
      <button>Publish</button>
    </form>
  )
}

Beide sind valide. Die TanStack-Version hat ein bewegliches Teil weniger. Die Plain-Version ist vertrauter für jeden, der React Hook Form verwendet hat. In der TanStack Form-Dokumentation finden Sie die vollständige Oberfläche.

Achse 5: Tabellen und virtuelle Listen

TanStack Table übertrumpft still und leise die meisten „React Table"-Bibliotheken. Headless, vollständig gesteuert, keine Meinungen zum Styling. Die TanStack Table-Dokumentation zeigt das kanonische Pattern: Daten rein, Row Models für Sortierung, Pagination, Filterung und Virtualisierung raus – ohne Drittanbieter-State-Bibliotheken. Kombiniert mit TanStack Virtual für 100k-Zeilen-Listen.

Ein Plain-React + react-table-Setup zieht oft eine Tabellenbibliothek, eine virtuelle Listenbibliothek, ein Sort-Utility, ein Filter-Utility und Klebecode ein. In einer meiner Plain-React-Apps machte der Tabellenbereich 41 % des initialen JS aus; bei TanStack waren es 14 %.

Achse 6: AI-Editor-Kompatibilität in 2026

Diese Achse hat sich 2026 für mich gedreht. AI-Editoren (Cursor, Claude Code, Codex CLI, Windsurf) bringen starkes allgemeines React-Wissen mit, aber inkonsistentes TanStack-spezifisches Wissen. Ein Plain-React-Prompt erzeugt nahezu jedes Mal eine saubere Antwort. Ein TanStack-Router-Prompt erzeugt etwas Plausibles, das in etwa einem von vier Fällen die dateibasierten Konventionen verfehlt.

Die Lösung ist gezielte AI-Tooling: Editor-Konfigs und Skills, die dem AI TanStack-Patterns beibringen. TanStack Ship liefert vorgeschaltet .cursorrules, CLAUDE.md, .windsurfrules und TanStack Intent Agent Skills aus. Mit Intent Skills gleicht TanStack den Vorteil aus dem Trainingskorpus ein oder übertrifft ihn.

Die vollständige Entscheidungsmatrix

Wo Plain React weiterhin gewinnt

Drei ehrliche Bereiche. In alle drei habe ich ausgeliefert.

Lernkurve

Plain React hat weniger Konzepte. Vite + React Router + React Query + React Hook Form sind vier gut dokumentierte Bibliotheken. Die erste Stunde ist auf Plain React schneller; die zweite Woche ist auf TanStack schneller.

Bundle-Oberfläche

Wenn Sie eine Single-Page-Marketing-Site mit einem Formular ausliefern, schifft Plain React weniger JS. Der TanStack-Stack rentiert sich, wenn es Routen, Tabellen und Formulare gibt.

LLM-Trainingskorpus

Jeder AI-Editor kennt Plain React besser als TanStack. Ohne Intent Skills erzeugt AI genauere Ausgaben für Plain-React-Prompts. Die Lücke schließt sich, sobald Sie TanStack Intent Skills hinzufügen.

Wo TanStack sich rentiert

Drei ehrliche Bereiche.

Multi-Route-SaaS-Apps mit echtem Admin

Sobald eine App mehr als ~10 Routen hat, bezahlt sich ein typisierter Router beim ersten Refactoring ein. In einer Plain-React-App dauerte das Umbenennen einer Route einen halben Tag. Im TanStack-Äquivalent listete pnpm tsc --noEmit jeden Callsite in 90 Sekunden auf.

Teams, die oft refaktorieren

Solo-Gründer refaktorieren alle zwei Wochen. TanStack Routers Compile-Time-Garantien fangen stillen Drift ab, der sich sonst zu Produktions-Incidents um 2 Uhr morgens entwickelt.

Solo-Devs, die mit AI-Tools ausliefern

Wenn Sie täglich Claude Code oder Cursor nutzen, sind die TanStack Intent Skills vorgeschaltet ausgeliefert und erzeugen beim ersten Versuch TanStack-korrekten Code. TanStack mit Intent Skills gleicht den Vorteil aus dem Trainingskorpus ein oder übertrifft ihn.

Wann Sie was wählen (Entscheidungsbaum)

Wählen Sie Plain React, wenn Sie einen Wochenend-Prototypen bauen, die App weniger als ~10 Routen und kein Admin-Panel hat, Bundle-Größe die höchste Priorität ist oder Ihr Team über tiefes React-Router-Expertenwissen verfügt.

Wählen Sie TanStack (Start + Router + Query + Form + Table), wenn Sie eine Multi-Route-SaaS ausliefern, Ende-zu-Ende-Typsicherheit Ihnen wichtig ist, Sie häufiges Refaktorieren erwarten, Sie AI-Editoren mit Intent Skills nutzen oder Sie ein einzelnes mentales Modell über Routing, Daten und Formulare hinweg wollen.

Wenn Sie zu TanStack tendieren, liefert TanStack Ship den gesamten Stack vorgeschaltet mit Intent Skills, Edge-Deployment und einem produktionsreifen Admin aus. Vergleichen Sie Alternativen auf der Vergleichsseite oder sehen Sie sich die Preisseite an, was enthalten ist.

Häufig gestellte Fragen

Ist TanStack Start 2026 produktionsreif? Ja. TanStack Start läuft auf Cloudflare Workers und Node, unterstützt Streaming SSR, Server Functions und typisierte Routing-Typisierung. Ich habe vier Produktions-Apps damit ausgeliefert. Die TanStack Start-Dokumentation verfolgt die Live-API.

Kann ich schrittweise von Plain React auf TanStack migrieren? Ja. TanStack Query und TanStack Form funktionieren beide in Plain-React-Apps. Beginnen Sie mit der Datenschicht, dann wechseln Sie zum Routing. Eine App habe ich über ein Wochenende migriert; der Rest funktionierte weiterhin.

Skaliert Plain React noch auf große SaaS-Apps? Ja – viele der größten SaaS-Apps 2026 laufen auf Plain React + React Router. Die Frage ist, ob Sie TanStack Compile-Time-Garantien wollen. Optional, nicht zwingend.

Über diesen Artikel

• Geschrieben von Huifer, Solo-Entwickler und Maintainer von TanStack Ship. 11 SaaS-Apps auf TanStack Start und 7 auf Plain React in 30 Monaten ausgeliefert.
• Verifizierte Quellen: TanStack Router · TanStack Start · TanStack Query · TanStack Form · TanStack Table · React Router · React · Cloudflare Workers · TanStack Ship GitHub
• Letzte Aktualisierung: 2026-05-22 · Changelog

Die TanStack-Verdrahtung sparen. TanStack Ship liefert Router, Start, Query, Form und Table vorgeschaltet mit Intent Skills und Edge-Deployment aus. TanStack Ship testen →