Ein Feldführer durch das TanStack-Ökosystem

TanStack ist eine Sammlung headless, typsicherer und komponierbarer Bibliotheken, die Datenabruf, Routing, Tabellen, Formulare, Virtualisierung und Client-State abdecken. Das Ökosystem entstand aus React Query, das inzwischen in TanStack Query umbenannt wurde. Die Daten- und UI-Bibliotheken werden mit Adaptern für React, Vue, Solid, Svelte und Angular ausgeliefert, während Router und Full-Stack-Framework auf React und Solid ausgerichtet sind. TanStack ist selbst kein Framework; das Projekt beschreibt seine Bestandteile als headless, komponierbare Utilities – lediglich ein Mitglied, TanStack Start, ist ein vollständiges Full-Stack-Framework.

Wer TanStack Query bereits einsetzt und immer wieder auf Router, Start, Table, Form, Store, DB und AI stößt, steht vor einer konkreten Frage: Was macht jede dieser Bibliotheken, wie ausgereift ist sie, und wann greift man zu ihr statt zum React-Standardstack (Next.js, React Router, Redux/Zustand, React Hook Form, Apollo, AG Grid)? Dieser Leitfaden kartiert das Ökosystem Bibliothek für Bibliothek, zeigt für jede eine minimale Code-Signatur, kennzeichnet den Reifegrad mit einer Versionsnummer und verdeutlicht, wie die Teile zusammenwirken. Es handelt sich um eine Übersichtskarte, kein Tutorial – Installationsschritte finden sich in der offiziellen Dokumentation, die durchgehend verlinkt ist.

Was ist TanStack, und warum ist „Headless” wichtig?

TanStack ist eine Sammlung unabhängiger Bibliotheken, die einer gemeinsamen Designregel folgen: Die Bibliothek besitzt die Logik, Sie besitzen das Rendering. Jede TanStack-Bibliothek trennt State von Markup – die Bibliothek betreibt die State Machine; Ihre Komponente entscheidet, wie die Oberfläche aussieht. Das ist die praktische Bedeutung von „headless”: Es gibt kein TanStack-CSS, das überschrieben werden müsste, keine TanStack-Komponente, die erweitert werden müsste, und keine Herstellermeinung darüber, wie Ihre UI aussehen soll. TanStack Query ist der Ursprung der Marke – es wurde von React Query umbenannt, als das Ökosystem wuchs –, obwohl TanStack Table dem Rebranding vorausging; Query ist also der popularisierende Ursprung, nicht buchstäblich die erste Bibliothek.

Die gemeinsame Philosophie wird oft als „own your code, not your framework” zusammengefasst. Daraus ergeben sich drei Eigenschaften:

• Headless: Logik ohne UI. Sie verbinden den State der Bibliothek mit beliebigem Markup, Design-System oder Accessibility-Layer, den Sie bereits verwenden.
• Framework-agnostischer Kern: Die Daten- und UI-Bibliotheken – Query, Table, Form, Virtual und Store – werden mit offiziellen Adaptern für React, Vue, Solid, Svelte und Angular ausgeliefert. Routing ist die Ausnahme: TanStack Router und TanStack Start richten sich ausschließlich an React und Solid.
• Komponierbarkeit statt Monolithen: Jede Bibliothek funktioniert allein oder im Verbund. Sie können Query ohne Router übernehmen oder Table ohne Start.

Die Bibliotheksübersicht

Jede der folgenden Bibliotheken wird hinsichtlich ihrer Funktion, der Alternativen, die sie ersetzt, ihres Reifegrads (Stand Juni 2026) und einer minimalen Code-Signatur beschrieben. Die Signaturen zeigen die API-Oberfläche, kein Setup-Tutorial – folgen Sie den verlinkten Dokumentationen für Installation und Konfiguration.

TanStack Query — Server-State

TanStack Query verwaltet asynchronen Server-State: Datenabruf, Caching, Hintergrund-Refetching, Deduplizierung und optimistische Updates. Es ersetzt das manuelle fetch-plus-useEffect-Muster, mit dem die meisten React-Apps begannen. Es ist stabil.

// @tanstack/react-query v5.101.0
const { data: users, isLoading, error } = useQuery({
  queryKey: ['users'],
  queryFn: () => fetch('/api/users').then((res) => res.json()),
});

Query ist der am weitesten verbreitete Einstiegspunkt in das Ökosystem und die Änderung mit dem höchsten ROI für eine bestehende React-Codebasis, da sie handgestrickte Lade- und Fehlerzustände beseitigt, ohne Routing oder UI-Schichten zu berühren.

TanStack Router — typsicheres Routing

TanStack Router ist ein vollständig typsicherer clientseitiger Router für React und Solid. Routenpfade, URL-Parameter, Suchparameter, Routenkontext und Loader-Daten sind durchgängig typisiert – der Compiler, nicht der Benutzer zur Laufzeit, erkennt einen Link mit falscher Parameterform. Er ersetzt React Router für SPAs und ist stabil.

// @tanstack/react-router v1.170.16
const Route = createFileRoute('/products')({
  validateSearch: (search) => ({
    category: (search.category as string) ?? 'all',
    page: Number(search.page ?? 1),
  }),
});

const { category, page } = Route.useSearch();

Router behandelt URL-Suchparameter als typisierten, validierten State, was Filter, Sortierreihenfolge und Paginierung per URL teilbar und bei Seitenaktualisierung wiederherstellbar macht. Dies löst eine spezifische, reproduzierbare Fehlerklasse: Session-Replays von SPA-Dashboards zeigen regelmäßig, wie Benutzer Filter-, Sortier- und Paginierungsstatus bei Aktualisierung oder Rücknavigation verlieren, wenn dieser State im Komponentenspeicher statt in der URL lag – genau der Fehlermodus, den typisierte Suchparameter beseitigen.

TanStack Table — Headless Data Grids

TanStack Table übernimmt die Logik von Datentabellen – Spaltendefinitionen, Sortierung, Filterung, Paginierung, Zeilenauswahl, Gruppierung und Spaltensichtbarkeit –, während jedes Pixel der UI Ihnen überlassen bleibt. Es etablierte das Headless-Muster im React-Ökosystem und ersetzt meinungsstarke Grid-Bibliotheken wie AG Grid und MUI DataGrid für Teams, die volle Kontrolle über das Markup wünschen. Es ist stabil, wobei eine V9-Linie in Entwicklung ist, die noch nicht als latest veröffentlicht wurde.

// @tanstack/react-table v8.21.3
const table = useReactTable({
  data,
  columns,
  getCoreRowModel: getCoreRowModel(),
});

Die Table-Instanz verwaltet den State; Ihr Markup rendert, was dieser State beschreibt. In Kombination mit Query für serverseitige Paginierung und Filterung verarbeitet es große Datensätze, ohne alles in den Client zu laden.

TanStack Form — typisierte Formulare

TanStack Form verwaltet Formular-State und Validierung – Fehler auf Feld- und Formularebene, synchrone und asynchrone Validierung, Übermittlungsstatus – ohne selbst etwas zu rendern. Es ist der headless Nachfolger von React Hook Form und stabil (v1).

// @tanstack/react-form v1.33.0
const form = useForm({
  defaultValues: { email: '', password: '' },
  onSubmit: async ({ value }) => { await loginUser(value); },
});

Feldwerte, Validierungsschemata und Übermittlungs-Payloads sind durchgängig typisiert, und asynchrone Validierung (z. B. Prüfung der Verfügbarkeit eines Benutzernamens) ist ein erstklassiges Feature mit Debouncing und Abbruchbehandlung durch die Bibliothek.

TanStack Virtual — Listen- und Grid-Virtualisierung

TanStack Virtual rendert bei großen scrollbaren Listen und Grids nur die Zeilen oder Spalten, die sich aktuell im Viewport befinden, und hält das DOM klein, während der Datensatz groß bleibt. Es liefert Ihnen die Maße und Offsets; Sie rendern das Markup. Es ersetzt handgestrickte Windowing-Lösungen und Bibliotheken wie react-window und react-virtualized. Es ist stabil.

// @tanstack/react-virtual v3.14.3
const virtualizer = useVirtualizer({
  count: items.length,
  getScrollElement: () => parentRef.current,
  estimateSize: () => 48,
});

const rows = virtualizer.getVirtualItems();

useVirtualizer gibt die virtuellen Elemente im Sichtbereich sowie die Gesamtgröße zurück; Sie positionieren jedes Element absolut anhand seines Offsets. Es ergänzt Table bei großen Datentabellen optimal – Table verwaltet das Zeilenmodell, Virtual hält nur sichtbare Zeilen im DOM –, sodass eine Liste mit fünftausend Einträgen mit voller Geschwindigkeit scrollt.

TanStack Store — Client-State

TanStack Store ist ein feinkörniger reaktiver Store, der die Interna mehrerer anderer TanStack-Bibliotheken antreibt und als eigenständiges Paket bereitgestellt wird. Es bietet eine Alternative zu Zustand und Redux für Client-State (nicht Server-State). Als eigenständiges Paket befindet es sich im Alpha-Stadium (v0.11.0) – jede Formulierung, die es als Zustand/Redux-Ersatz darstellt, sollte mit diesem Reifegrad im Hinterkopf bewertet werden.

// @tanstack/store v0.11.0 + @tanstack/react-store
import { Store } from '@tanstack/store';
import { useStore } from '@tanstack/react-store';

const countStore = new Store(0);
// in einer Komponente:
const count = useStore(countStore);

Die Aufgabenteilung ist das nützliche mentale Modell: Query besitzt den Server-State, Store den Client-State. Für die meisten Anwendungen deckt Query zusammen mit einer kleinen Menge Store (oder Ihrem bestehenden Client-State-Tool) die gesamte State-Oberfläche ab.

TanStack Start — Full-Stack-Framework

TanStack Start ist ein Full-Stack-React-Framework, das auf TanStack Router aufbaut. Es bringt dateibasiertes Routing, Server-Funktionen, Streaming-SSR und durchgängiges TypeScript, während die zugrundeliegenden Mechanismen sichtbar bleiben. Es positioniert sich gegen Next.js und Remix. Start befindet sich im Release-Candidate-Stadium (aktuelle Release-Linie 1.168.x), ist noch nicht als stabil deklariert, und seine React-Server-Components-Unterstützung ist experimentell verfügbar, nicht als Produktionsstandard.

// @tanstack/react-start v1.168.26
import { createServerFn } from '@tanstack/react-start';

const getUser = createServerFn({ method: 'GET' })
  .validator((userId: string) => userId)
  .handler(async ({ data: userId }) => db.users.findById(userId));

Server-Funktionen sind typisierte, co-lokalisierte Funktionen, die auf dem Server ausgeführt, aber aus Client-Komponenten wie jede andere asynchrone Funktion aufgerufen werden – die Typen fließen von der Datenquelle zur Komponente ohne manuelle Annotation, und es ist keine separate API-Schicht für einfaches Fetching erforderlich. Beachten Sie, dass der Import-Pfad @tanstack/react-start lautet; ältere Anleitungen, die @tanstack/start zeigen, sind veraltet.

TanStack DB — reaktiver Client-Store

TanStack DB ist ein reaktiver, client-first Store mit Collections, Live-Queries und optimistischen Mutationen. Sie definieren Collections, schreiben Queries gegen sie, und jede Komponente, die eine Query beobachtet, wird neu gerendert, wenn sich die zugrundeliegenden Daten ändern – durch eine Serversynchronisierung, eine lokale Mutation oder ein optimistisches Update. Es sitzt vor Ihrem eigenen Backend oder Ihrer API; es ist eine clientseitige Store/Sync-Schicht und kein Firebase- oder Supabase-Backend-as-a-Service-Ersatz. Es befindet sich in der Beta-Phase (v0.6.9).

DB adressiert die Lücke jenseits von Fetch-and-Cache: datenintensive Anwendungen mit Echtzeit-Updates, komplexer clientseitiger Filterung und Mehrbenutzerstatus. Der Vergleich mit „headless Firebase” ist eine Analogie für das reaktive Query-Modell, keine Substitutionsbehauptung bezüglich gehosteter Infrastruktur.

TanStack AI — anbieteragnostische KI-Primitive

TanStack AI stellt headless Primitive für KI-gestützte Features bereit – Streaming-Antwortverarbeitung, Konversationsstatus und eine einheitliche Schnittstelle über Modellanbieter hinweg –, ohne Sie an ein einzelnes SDK oder einen Anbieter zu binden. Es befindet sich in der Beta-Phase, wie im TanStack-Blog angekündigt, nicht im Alpha- oder experimentellen Stadium.

Streaming-Antworten (schrittweise eintreffende Tokens) werden nativ verarbeitet, was KI-Chat- und Generierungsschnittstellen responsiv wirken lässt. Der Wert liegt in der Architektur: Eine anbieteragnostische Schicht hält Sie frei, Modellanbieter zu wechseln, ohne Ihren UI-State neu schreiben zu müssen.

Die Reifegradtabelle

Der Reifegrad variiert im Ökosystem erheblich, und der häufigste Fehler in Ökosystem-Übersichten ist die Darstellung experimenteller Bibliotheken als etabliert. Fünf der neun hier behandelten Bibliotheken – Query, Router, Table, Form und Virtual – sind Stand Juni 2026 stabil; Start befindet sich im Release-Candidate-Stadium mit experimentell verfügbaren React Server Components; DB und AI sind in der Beta-Phase; Store ist im Alpha-Stadium. Die folgende Tabelle verzeichnet die veröffentlichte Version und den Status jeder Bibliothek.

Prüfen Sie die verlinkten Dokumentationen für den aktuellen Release-Status.

Wie die Teile zusammenwirken

Die Bibliotheken sind für die Komposition ausgelegt, und die zentrale Integration ist das Vorabrufen von Query-Daten durch Router-Loader, sodass eine Komponente gegen einen warmen Cache rendert. Ein Routen-Loader kann queryClient.ensureQueryData aufrufen, bevor die Komponente eingehängt wird; wenn sie rendert, sind die Daten bereits gecacht. Wenn Start SSR zu dieser Pipeline hinzufügt, werden die Daten serverseitig vorgeladen und dehydriert und treffen beim ersten Request als vollständig gerendertes HTML ein.

// @tanstack/react-router v1.170.16 + @tanstack/react-query v5.101.0
const Route = createFileRoute('/users/$userId')({
  loader: ({ params }) =>
    queryClient.ensureQueryData({
      queryKey: ['user', params.userId],
      queryFn: () => fetchUser(params.userId),
    }),
  component: UserPage,
});

Drei konkrete Verbindungen sind es wert, benannt zu werden:

1. Router → Query: Routen-Loader rufen Query-Daten vorab ab und eliminieren so den Ladeblitz beim ersten Render.
2. Start → Router: Start baut auf Router auf, sodass das typisierte Routing- und Loader-Modell direkt in das Full-Stack-Framework übergeht, ergänzt um SSR und Dehydrierung.
3. Table → Query: Table verbraucht paginierte, gefilterte Daten von Query für serverseitige Paginierung, sodass das Grid große Datensätze verarbeitet, ohne alles clientseitig zu laden.

TanStack vs. die etablierten Alternativen

Wählen Sie TanStack Start für öffentliche Seiten, die indexiert und geteilt werden müssen, und TanStack Router allein für authentifizierte Dashboards, bei denen SEO irrelevant und clientseitige Performance die Priorität ist. Diese Rendering-Strategie-Entscheidung ist die erste architektonische Wahl und geht jeder Bibliothekswahl voraus – es ist eine Produktentscheidung, keine technische Präferenz.

• Öffentliche Seiten (Marketing-Seiten, Blogs, Content-Produkte) benötigen SSR. Crawler führen JavaScript nicht zuverlässig aus; Core Web Vitals wie LCP, CLS und INP sind Google-Rankingsignale; und Open-Graph-Metadaten werden aus der Server-Antwort gelesen. Start liefert beim ersten Request vollständig gerendertes HTML.
• Authentifizierte Anwendungen (Dashboards, interne Tools, Kundenportale) können ohnehin nicht gecrawlt werden, sind sitzungsbasiert und zustandsbehaftet und priorisieren Time-to-Interactive. Eine SPA auf Router allein – ohne das SSR-Maschinerie von Start – ist oft schlanker.

Für die Frage Bibliothek vs. etablierte Alternative lässt sich das Ökosystem sauber auf die React-Standards abbilden:

Wann TanStack nicht die richtige Wahl ist

Das headless, typsichere Modell von TanStack ist ein starker Standard, aber in drei Situationen ein echter Nachteil – und eine ehrliche Übersicht benennt diese. Das Modell ist ungeeignet, wenn Ihr Team vorgefertigte Komponenten benötigt, wenn Ihr Einstellungspool Redux und React Router kennt, aber nicht TanStack, oder wenn Sie heute stabile React Server Components in der Produktion benötigen – da die RSC-Unterstützung in Start noch experimentell ist, bleiben Next.js und React Hook Form in diesen Fällen die pragmatischeren Entscheidungen.

Konkret:

• Bedarf an vorgefertigten Komponenten: Headless bedeutet, Sie bauen die UI. Wenn Sie ein Grid oder Formular wünschen, das nach der Installation fertig aussieht, sind AG Grid, MUI oder ein Komponenten-Kit schneller.
• Team-Vertrautheit und Einstellung: Mehr Entwickler kennen Redux, React Router und Next.js. Die Lernkurve und der kleinere Einstellungspool sind reale Kosten für die Teamskalierung.
• RSC in der Produktion heute: Next.js hat jahrelange Produktionsbewährung für React Server Components; die RSC-Unterstützung von Start ist Stand Juni 2026 experimentell.
• Frühe Bibliotheken: Store (Alpha), DB (Beta) und AI (Beta) sind noch nicht produktionsreif als Standard. Übernehmen Sie sie mit diesem Reifegrad im Hinterkopf und beobachten Sie Version und Status in der verlinkten Dokumentation.

Über die hier behandelten Bibliotheken hinaus pflegt TanStack eine Utility-Ebene – darunter Virtual, Pacer, Ranger und die DevTools –, die demselben headless, typsicheren Muster in kleinerem Umfang folgt.

Wo anfangen

Übernehmen Sie zuerst Query, falls noch nicht geschehen – es ist die Änderung mit dem höchsten ROI für eine React-Codebasis und verpflichtet Sie zu nichts anderem. Greifen Sie bei einer Greenfield-SPA zu Router, anstatt eine bestehende App zu migrieren, und betrachten Sie Start als die Wahl für neue öffentliche Seiten, die SSR benötigen, während Sie dessen RC-Status im Auge behalten. Für die frühen Bibliotheken – Store, DB und AI – sollten die datierte Reifegradtabelle und die verlinkten offiziellen Dokumentationen, nicht der Ökosystem-Hype, entscheiden, ob eine Bibliothek für die vorgesehene Rolle bereit ist.

Häufig gestellte Fragen

Was ist der Unterschied zwischen TanStack Query und TanStack DB?

TanStack Query verwaltet asynchronen Server-State durch Datenabruf, Caching, Hintergrund-Refetching und Deduplizierung und behandelt den Server als Quelle der Wahrheit, die der Client spiegelt. TanStack DB ist ein reaktiver, client-first Store mit Collections, Live-Queries und optimistischen Mutationen, der vor Ihrem eigenen Backend für datenintensive Anwendungen mit Echtzeit-Updates und komplexer clientseitiger Filterung sitzt. Query ist stabil; DB ist Stand Juni 2026 in der Beta-Phase.

Kann ich TanStack-Bibliotheken mit Vue, Svelte oder Angular statt React verwenden?

Ja, für die Daten- und UI-Bibliotheken. Query, Table, Form, Virtual und Store werden mit offiziellen Adaptern für React, Vue, Solid, Svelte und Angular ausgeliefert. Routing ist die Ausnahme: TanStack Router und das TanStack-Start-Full-Stack-Framework richten sich ausschließlich an React und Solid. Ein Vue- oder Angular-Team kann also Query und Table übernehmen, aber nicht TanStack Router für typsicheres Routing verwenden.

Ist TanStack Start als Next.js-Ersatz produktionsreif?

Noch nicht vollständig, Stand Juni 2026. TanStack Start befindet sich im Release-Candidate-Stadium auf der Release-Linie 1.168.x, ist noch nicht als stabil deklariert, und seine React-Server-Components-Unterstützung ist nur experimentell verfügbar, nicht als Produktionsstandard. Wenn Sie heute stabile RSC in der Produktion benötigen, hat Next.js jahrelange Bewährung für dieses Feature. Start ist eine vernünftige Wahl für neue öffentliche SSR-Seiten, bei denen experimentelle RSC akzeptabel ist.

Muss ich das gesamte TanStack-Ökosystem übernehmen, um eine Bibliothek zu nutzen?

Nein. Jede TanStack-Bibliothek ist unabhängig und komponierbar, sodass Sie Query ohne Router oder Table ohne Start übernehmen können. Die Bibliotheken integrieren sich, wenn sie zusammen verwendet werden (Routen-Loader können beispielsweise Query-Daten vorab abrufen), aber keine erfordert die anderen. Query ist der häufigste Einstiegspunkt, da es die Änderung mit dem höchsten ROI für eine bestehende React-Codebasis ist und Sie zu nichts anderem im Ökosystem verpflichtet.