Wer in der JavaScript-Welt die Ohren offenhält, hat in letzter Zeit immer öfter einen Namen gehört: TanStack Start. Ein neues Fullstack-Framework für React, das mit großen Versprechen antritt: Typsicherheit von vorne bis hinten, Server-Rendering ohne Kopfschmerzen, und das alles ohne die schweren Abstraktionen, die andere Frameworks mit sich schleppen. Klingt gut? Dann schauen wir uns gemeinsam an, was hinter TanStack Start steckt, woher es kommt und warum so viele Entwicklerinnen und Entwickler gerade hellhörig werden.

Was ist TanStack Start überhaupt?

Stell dir vor, du willst ein Haus bauen. Du könntest ein fertiges Fertighaus kaufen, schnell aufgestellt, aber du hast kaum Einfluss auf den Grundriss. Oder du arbeitest mit einem erfahrenen Architekten, der dir ein Haus baut, das genau zu deinen Bedürfnissen passt, ohne unnötigen Schnickschnack. TanStack Start ist eher das zweite Modell.

TanStack Start ist ein DX-optimiertes Fullstack-Framework, DX steht für Developer Experience, also wie angenehm es ist, damit zu arbeiten. Es wurde gebaut, um serverseitiges Rendering, Streaming, Server Functions und Bundling direkt mitzubringen, ohne dass man dafür zehn verschiedene Pakete zusammenstückeln muss. Das Framework wurde von Tanner Linsley entwickelt, der in der React-Community vor allem durch seine hervorragenden Open-Source-Bibliotheken bekannt ist.

Ein kurzer Blick zurück: Wie alles mit React begann

Die Entstehung von React im Jahr 2013

Um zu verstehen, warum TanStack Start überhaupt existiert, lohnt sich ein kurzer Rückblick. React wurde 2013 von Facebook entwickelt. Das eigentliche Ziel war es, den Entwicklern das Leben leichter zu machen, nämlich den Umgang mit dem sogenannten State, also den sich verändernden Zuständen in einer Webanwendung, deutlich zu vereinfachen. Wer damals noch mit jQuery gearbeitet hat, weiß, wie schnell das zum Albtraum werden konnte: Man klickte auf einen Button, und plötzlich musste man an fünf verschiedenen Stellen im Code etwas anpassen. React löste dieses Problem elegant.

Next.js betritt die Bühne - 2016

2016 kam dann Next.js von Vercel auf den Markt. Es war quasi eine Hülle um React herum, die eine große Lücke schloss: serverseitiges Rendering, also die Möglichkeit, HTML bereits auf dem Server zu erzeugen, bevor es zum Browser geschickt wird. Das Ergebnis: schnellere Ladezeiten, weniger JavaScript im Browser und eine bessere Suchmaschinenoptimierung. Millionen von Entwicklerinnen und Entwicklern sprangen auf den Zug auf.

Warum Next.js in die Kritik geriet

Identitätskrise und Breaking Changes

So schön die Anfangszeit war, mit der Zeit zog der Himmel über Next.js dunkler. React selbst durchlief eine Art Identitätskrise, als neue Konzepte wie Server Components eingeführt wurden. Das zog Next.js mit sich. Es gab Breaking Changes, also Änderungen, die bestehenden Code kaputt gemacht haben, und das ohne sanfte Übergänge.

Sicherheitslücken und schlechte Stimmung

Noch gravierender: Es tauchten ernste Sicherheitslücken im Framework auf. In der Community sprach man offen von "bad vibes", einem allgemeinen Unbehagen, das sich unter Next.js-Entwicklern breit machte. Das Vertrauen in das Framework bröckelte spürbar.

Die Abstraktionsschicht wird zum Problem

Ein weiterer Kritikpunkt: Next.js hatte im Laufe der Zeit so viele eigene Abstraktionen entwickelt, dass man manchmal das Gefühl hatte, nicht mehr mit React, sondern mit einer völlig eigenen Welt zu arbeiten. Das macht den Einstieg schwerer und die Fehlersuche mühsamer, wie ein Auto, bei dem die Motorhaube verschweißt ist.

TanStack Start: Die Antwort auf die Probleme

Tanners Vision: Type-Safe und Server-First

Genau hier setzt Tanner Linsley an. Seine Frage war simpel: Was wäre, wenn wir ein React-Framework hätten, das von Grund auf typsicher und server-first gedacht ist, aber ohne all die schweren Abstraktionen? Die Antwort war TanStack Start.

Das Ziel war kein Framework, das einem alles abnimmt und dabei zur Black Box wird. Stattdessen sollte es transparent, nachvollziehbar und vor allem entwicklerfreundlich sein, so wie ein gut beschrifteter Werkzeugkasten, bei dem man sofort sieht, welches Werkzeug wozu dient.

Ein neues Projekt anlegen, so einfach geht's

Der erste Befehl

Ein neues TanStack-Start-Projekt zu starten ist denkbar einfach. Man führt einen einzigen Befehl in der Kommandozeile aus, wählt aus einer Handvoll Konfigurationsoptionen und schon steht das Grundgerüst.

Was direkt mitgeliefert wird

Wer das Projekt zum ersten Mal öffnet, wird angenehm überrascht sein, was bereits ohne weitere Konfiguration enthalten ist:

• Vitest für das automatisierte Testen von Code
• Tailwind CSS für schnelles, utility-basiertes Styling
• TanStack Router für das Routing
• TypeScript mit durchgängiger End-to-End-Typsicherheit

Das ist ein bisschen so, als würde man ein neues Smartphone kaufen und feststellen, dass die wichtigsten Apps bereits vorinstalliert und konfiguriert sind, kein stundenlanger Setup-Marathon.

Server Functions: Serverlogik dort, wo sie hingehört

Was sind Server Functions?

Eine der spannendsten Funktionen von TanStack Start sind die sogenannten Server Functions. Der Grundgedanke ist simpel: Manche Dinge dürfen oder sollen gar nicht im Browser laufen. Datenbankzugriffe, der Umgang mit dem Dateisystem oder das Auslesen sensibler Umgebungsvariablen, all das gehört auf den Server.

Mit TanStack Start kann man solche Logik in dedizierten Server Functions kapseln. Diese Funktionen laufen ausschließlich auf dem Server, können aber von überall in der Anwendung aufgerufen werden.

Typsicherheit über Netzwerkgrenzen hinweg

Das besonders Clevere daran: Die Typsicherheit bleibt auch über die Netzwerkgrenze hinweg erhalten. Das bedeutet, wenn man eine Server Function aufruft und sie einen bestimmten Datentyp zurückgibt, weiß das Frontend das, ohne dass man irgendetwas manuell definieren müsste. TypeScript prüft alles automatisch. Fehler, die früher erst zur Laufzeit aufgetaucht wären, werden jetzt schon beim Schreiben des Codes erkannt. Das spart Stunden beim Debugging.

Routing mit TanStack Router: Dateien als Routen

Filesystem-basiertes Routing

TanStack Start baut auf dem TanStack Router auf, der ein dateibasiertes Routing-System verwendet. Die Idee ist bekannt aus anderen Frameworks: Eine neue Route in der Anwendung bedeutet schlicht, eine neue Datei im routes-Verzeichnis anzulegen. Der Name der Datei bestimmt die URL. Fertig.

Das ist wie ein gut organisierter Aktenordner: Jede Datei an ihrem Platz, und man findet sofort, was man sucht.

Loader: Daten vor dem Rendern laden

Für jede Route lässt sich ein sogenannter Loader definieren, eine Funktion, die Daten lädt, bevor die Seite gerendert wird. Das Ergebnis: Die Komponente hat die Daten bereits parat, wenn sie das erste Mal angezeigt wird. Kein Flackern, kein Ladeindikator, der eine halbe Sekunde nach dem Seitenaufruf auftaucht.

API-Routen für HTTP-Requests

Wer rohe HTTP-Anfragen verarbeiten möchte, etwa für Webhooks oder eigene REST-Endpunkte, kann auch das mit demselben Datei-System-Ansatz umsetzen. Durch eine spezielle server-Eigenschaft in der Route wird aus einer normalen Seitenroute eine vollwertige API-Route.

TanStack Start im Vergleich zu Next.js

Gemeinsamkeiten und Unterschiede

Auf den ersten Blick mag TanStack Start wie eine direkte Kopie von Next.js wirken: serverseitiges Rendering, dateibasiertes Routing, TypeScript-Unterstützung. Doch der entscheidende Unterschied liegt in der Philosophie. Während Next.js über die Jahre immer mehr eigene Abstraktionen aufgebaut hat, versucht TanStack Start bewusst nah an den Web-Standards zu bleiben und möglichst wenig zu verstecken.

Für erfahrene Entwicklerinnen und Entwickler bedeutet das mehr Kontrolle. Für Einsteiger bedeutet es, dass das, was man lernt, tatsächlich auf das echte Web übertragbar ist, nicht auf eine proprietäre Welt innerhalb eines Frameworks.

Fazit: Lohnt sich der Blick auf TanStack Start?

TanStack Start ist kein Hype ohne Substanz. Es adressiert echte Probleme, die viele Entwicklerinnen und Entwickler mit bestehenden React-Frameworks kennen: zu viele Abstraktionen, mangelnde Typsicherheit über Servergrenzen hinweg, und ein gewisser Vertrauensverlust nach einer Reihe von Sicherheitsvorfällen und Breaking Changes. Mit einem klaren Fokus auf Developer Experience, durchgängiger TypeScript-Unterstützung und einem schlanken, nachvollziehbaren Design bietet TanStack Start eine frische Perspektive auf die Fullstack-Entwicklung mit React. Ob es Next.js langfristig ablösen wird, bleibt abzuwarten, aber es ist definitiv einen ernsthaften Blick wert, vor allem für all jene, die das Gefühl haben, bei anderen Frameworks die Kontrolle verloren zu haben.

Häufig gestellte Fragen (FAQ)

Muss ich TanStack Query kennen, um TanStack Start zu nutzen?

Nein, TanStack Start ist ein eigenständiges Framework und setzt keine Kenntnisse von TanStack Query voraus. Allerdings lassen sich beide sehr gut miteinander kombinieren, falls man clientseitiges Daten-Caching benötigt. Wer TanStack Query bereits kennt, wird sich in der TanStack-Welt sofort heimisch fühlen.

Ist TanStack Start auch für kleine Projekte geeignet, oder ist es eher etwas für große Anwendungen?

TanStack Start ist so konzipiert, dass es sowohl für kleinere Projekte als auch für größere, komplexe Anwendungen skaliert. Das Setup ist schnell erledigt, und man zahlt kein Performance-Preis für Features, die man gar nicht nutzt. Gerade für Einsteiger, die von Grund auf verstehen wollen, wie Fullstack-Entwicklung mit React funktioniert, ist es ein ausgezeichneter Ausgangspunkt.

Kann ich meine bestehende Next.js-Anwendung einfach zu TanStack Start migrieren?

Eine direkte 1:1-Migration ist nicht möglich, da beide Frameworks unterschiedliche Routing-Konzepte und API-Strukturen verwenden. Eine schrittweise Migration, etwa indem man neue Features direkt in TanStack Start entwickelt und alte Teile nach und nach überträgt, ist jedoch durchaus praktikabel. Wer die Migration plant, sollte sich zunächst mit dem TanStack Router vertraut machen, da dieser das Herzstück des Frameworks bildet.