TanStack Ship vs Supastarter: Next.js + Nuxt vs TanStack Start on Cloudflare

Geschrieben von Huifer, Solo-Entwickler und Maintainer von TanStack Ship. Ich habe Produktions-SaaS sowohl mit Next.js als auch mit TanStack Start deployed und mir Supastarters Codebase genau angeschaut – bei zwei Kundenprojekten, bevor ich mich dann doch für TanStack Start entschieden habe. Dieser Beitrag ist der Vergleich, den ich mir gewünscht hätte, als ich diese Entscheidung traf. Ich bin parteiisch für TanStack Ship (ich habe es gebaut), deshalb benenne ich Supastarters reale Stärken ganz am Anfang – Vue-Support ist ein legitimer Grund, sich für Supastarter zu entscheiden.

Verifizierte Quellen: Supastarter official site · TanStack Ship GitHub Last updated: 2026-07-21 · Changelog

TL;DR: TanStack Ship ist React-only auf Cloudflare Workers, mit 14 produktionserprobten Modulen und einer TanStack-nativen AI-Tooling-Story. Supastarter bietet React (Next.js) und Vue (Nuxt), Stripe plus Creem für Zahlungen und läuft auf Vercel, Netlify oder einem eigenen Node-Host. Wenn Sie Vue brauchen oder Creem zusätzlich zu Stripe möchten, ist Supastarter die richtige Wahl. Wenn Sie ein React-only-Team sind, das auf Cloudflare Workers entwickelt, ist TanStack Ship die fokussiertere Lösung.

Was TanStack Ship in einem Absatz ist

TanStack Ship ist ein TanStack-Start-SaaS-Boilerplate, das ich als Solo-Entwickler pflege. Es bringt 14 Module mit – Auth (Better Auth), Billing (Stripe + D1), E-Mail, UTM-Attribution, Empfehlungen, Guthaben, Admin, Blog, Pricing, i18n (Paraglide), AI-Integration, Analytics, Monitoring und ein CLI-Scaffold – zusammengeschaltet auf Cloudflare Workers. Das Ganze läuft an der Edge, kostet ca. 14 $/Monat bei unserer Last und ist geprägt von den Patterns, die ich in 12+ Produktions-Kundenprojekten immer wieder gebraucht habe.

Was Supastarter in einem Absatz ist

Supastarter ist ein Multi-Framework-SaaS-Starter, der sowohl als Next.js- als auch als Nuxt-Version erhältlich ist. Er deckt Authentifizierung, Billing (Stripe + Creem), Internationalisierung und eine Marketing-Site ab, mit einem polierten UI-Kit. Er läuft auf Vercel, Netlify oder einem eigenen Node-Host. Das Team dahinter vertreibt ihn als Paid-Produkt und aktualisiert ihn regelmäßig; die Vue-Version (Nuxt) ist die Version, die ich am häufigsten loben höre.

TL;DR des Vergleichs

Stack: React-Only vs Next.js + Nuxt

Das ist der Hauptunterschied und der am besten begründbare Grund, sich für das eine oder andere zu entscheiden.

Supastarters Stärke: Es bedient sowohl React (Next.js) als auch Vue (Nuxt) aus derselben Design-Language-Quelle. Wenn Ihr Team Vue-Entwickler hat – oder wenn Ihr Einstellungsmarkt eher Vue-lastig ist – ist Supastarter die naheliegende Wahl. Vue's DX hat sich seit Nuxt 3 erheblich verbessert, und das Supastarter-Team hat echte Ingenieursarbeit in die Vue-Version gesteckt. Ich habe zwei Kundenprojekte erlebt, bei denen die Vue-Version den Ausschlag gab.

TanStack Ships Positionierung: TanStack Ship ist bewusst React-only. Das ist eine bewusste Scope-Entscheidung, kein fehlendes Feature. Der Grund: Ich pflege das als Solo-Entwickler, und indem ich die Codebase TanStack-only halte, kann ich tiefere Integrationen (Drizzle-Patterns, TanStack-Query-Konventionen, TanStack-Router-File-based Routing) liefern, ohne zwei parallele Codebases zu warten. Wenn Ihr Team React-only ist – oder Sie ein Solo-Dev sind – zahlt sich dieser Fokus in der Qualität der React-spezifischen Patterns aus.

Der ehrliche Trade-off: Wenn ein Vue-Entwickler zu Ihrem Team stößt, wird TanStack Ship nicht die richtige Codebase für ihn sein. Supastarter nimmt diesen Neueinstieg problemlos auf.

Wie das in der package.json aussieht

Die beiden Codebases machen ihren Framework-Support schon auf Dependency-Ebene deutlich. Die Shapes unten sind illustrativ – die echten Boilerplates haben deutlich mehr Dependencies, aber die relevanten Zeilen stehen hier.

// TanStack Ship — React-only, TanStack-native
{
  "dependencies": {
    "@tanstack/react-start": "^1.0.0",
    "@tanstack/react-router": "^1.50.0",
    "@tanstack/react-query": "^5.50.0",
    "react": "^18.3.0",
    "react-dom": "^18.3.0"
  }
}

// Supastarter — Next.js or Nuxt, both shipped
{
  "comments": {
    "next": "Install the Next.js version",
    "nuxt": "Install the Nuxt version"
  },
  "nextDependencies": {
    "next": "^14.2.0",
    "react": "^18.3.0"
  },
  "nuxtDependencies": {
    "nuxt": "^3.13.0",
    "vue": "^3.5.0"
  }
}

Der strukturelle Unterschied ist klar: TanStack Ships package.json setzt React als Runtime voraus; Supastarter liefert zwei parallele Codebases und lässt Sie wählen. Das ist ein echter operativer Unterschied, nicht nur ein stilistischer – Supastarters Release Notes müssen beide Codebases bedienen, TanStack Ships Release Notes nur eine.

Zahlungen: Stripe-Only vs Stripe + Creem

Hier hat Supastarter einen begründbaren Vorteil für eine bestimmte Käuferschicht: Jeder, der Märkte bedient, in denen Creem (ein datenschutzfreundlicher, EU-basierter Payment-Provider) deutlich einfacher ist als Stripe, oder in denen das Halten beider Optionen Stripes Checkout-Friction senkt. Creem ist ein echtes Produkt für ein echtes Publikum, und Supastarters Dual-Integration ist eine durchdachte Antwort an dieses Publikum.

TanStack Ships Billing-Modul integriert nur Stripe, mit denselben Invoice + Subscription + Webhook-Patterns, die ein Next.js-Nutzer erwarten würde, plus die optionalen UTM-Attribution- und Referral-Guthaben-Schienen, die ich in Produktionsprojekten eingesetzt habe. Wenn Sie nur Stripe brauchen, sind TanStack Ships Billing-Defaults tiefer – der Queue-gestützte Write-Path und das Credit-Ledger sind standardmäßig verdrahtet, und die Postmortem-Serie dokumentiert die Fehler, die zu diesen Defaults geführt haben. Wenn Sie Creem brauchen, hat TanStack Ship das nicht.

Server Function vs Server Action – gleiches Shape, anderer Name

Beide Codebases unterstützen „eine Funktion, die von einem Route-Handler aufgerufen wird, serverseitig läuft und typsichere Argumente hat." TanStack Ship nennt das Server Function; Next.js nennt es Server Action. Das Shape ist nahezu identisch:

// TanStack Ship — Server Function (TanStack Start)
import { createServerFn } from "@tanstack/start";
import { z } from "zod";

export const recordUsage = createServerFn({ method: "POST" })
  .validator(z.object({ customerId: z.string(), value: z.number() }))
  .handler(async ({ data }) => {
    await usageEventQueue.send({
      customerId: data.customerId,
      value: data.value,
    });
    return { ok: true };
  });

// Supastarter (Next.js) — Server Action
"use server";

import { z } from "zod";

const Body = z.object({ customerId: z.string(), value: z.number() });

export async function recordUsage(formData: FormData) {
  const parsed = Body.parse({
    customerId: formData.get("customerId"),
    value: Number(formData.get("value")),
  });
  await db.usage.insert(parsed);
  return { ok: true };
}

Die TanStack-Ship-Version komponiert standardmäßig mit dem Queue-Producer-Pattern; die Supastarter-Version schreibt direkt nach Drizzle/Prisma. Beides ist in Ordnung. Das TanStack-Ship-Shape ist das, was entsteht, wenn das D1 Write-Lock Postmortem zum Default-Pattern wird.

Edge-Deployment: Cloudflare Workers vs Multi-Platform

TanStack Ships einziges Ziel ist Cloudflare Workers. Die gesamte Codebase ist darauf ausgerichtet: D1 für die Datenbank, R2 für Object Storage, Queues für asynchrone Arbeit, Workflows für batched Writer, Durable Objects für Echtzeit-Zustand. Es gibt keinen Vercel-Adapter, keinen Netlify-Adapter, keinen Node-Host-Shim. Dieser fokussierte Ansatz ist der Grund, warum das Boilerplate mit tief integrierten Workers-nativen Modulen ausgeliefert wird statt mit plattformagnostischen Abstraktionen.

Supastarter zielt auf Vercel, Netlify und selbst-gehosteten Node. Diese Reichweite ist ein echter Vorteil für Teams mit einer bestehenden Deployment-Plattform oder mit IT-Constraints, die sie von Cloudflare fernhalten. Multi-Platform-Support ist echte Ingenieursarbeit, und das Supastarter-Team leistet sie.

Kosten bei Scale

Ein nützlicher Richtungsvergleich: Bei der Produktionslast, die ich auf TanStack Ship fahre (3.200 Kunden, ca. 250 Req/s Peak, ca. 700 GB Egress/Monat), liegt die Cloudflare-Workers-+-D1-+-R2-Rechnung bei ca. 14 $/Monat. Das Äquivalent Vercel + Neon + Vercel Blob landet bei derselben Last typischerweise zwischen 120 und 240 $/Monat, je nachdem, welchen Vercel-Plan Sie haben und wie aggressiv Sie cachen. Supastarter senkt nicht die Plattformkosten – es liefert denselben Vercel-Stack mit Starter-Quality-Defaults. TanStack Ship senkt die Kosten, weil Workers + D1 + R2 strukturell günstiger sind als das Vercel-Äquivalent für diese Workload-Form.

AI-Tooling-Kompatibilität

Beide Codebases sind freundlich zu AI-Coding-Agents. Der Unterschied liegt in der Form der Freundlichkeit.

TanStack Ship liefert TanStack Intent Agent Skills für jedes Modul – Markdown-Prompts, Tool-Definitionen und Example-Workflows, die von Claude Code, Cursor, Windsurf und Codex automatisch erkannt werden, sobald das Paket installiert ist. Der TanStack-Intent-Erklärer führt durch Discovery und Konsumption. Vom ersten Tag an sieht die AI strukturierten, versionierten Kontext für jedes Modul. Kein CLAUDE.md zum Pflegen.

Supastarter liefert eine CLAUDE.md und einen cursor/rules-Ordner mit vernünftigen Defaults. Die Codebase ist sauber genug, dass ein AI-Agent gut damit arbeitet. Der Kontext des Agents ist das, was in Ihrem Repo ist (Code, READMEs, die CLAUDE.md, die Sie pflegen) – kein versioniertes Manifest.

Ehrlichkeitsgrenze

Ich habe keinen kontrollierten A/B-Benchmark zwischen diesen beiden AI-Tooling-Formen über eine große Codebase hinweg durchgeführt. Meine Hands-on-Erfahrung sagt, dass TanStack Ships Agent Skills weniger halluzinierte Imports und weniger „as of my last update"-Caveats produzieren als eine vergleichbare Next.js-Codebase ohne Skills – aber das ist eine persönliche Workflow-Beobachtung, keine publizierte Studie. Behandeln Sie die Aussage als Richtungsangabe.

Preismodelle

Beide Codebases sind bezahlte Produkte. TanStack Ship bietet einen kostenlosen Starter, der die Auth-, Billing- und Blog-Module zur Evaluation enthält; das Pro-Tier schaltet UTM, Referral, Credits und das AI-Integrationsmodul frei. Supastarter verkauft pro Version (Next.js und Nuxt separat bepreist). Beide amortisieren den Zeitaufwand eines Solo-Devs beim ersten kommerziellen Projekt; keines ist der günstigste Posten in Ihrem SaaS-Stack.

Eine faire Offenlegung: Mein Anreiz ist, TanStack Ship als Antwort für React-only-Teams zu positionieren. Die ehrliche Fassung: Wenn Vue auf Ihrer Roadmap steht, gewinnt Supastarter diese Frage klar.

Entscheidungsbaum

Entscheiden Sie sich für Supastarter, wenn mindestens eines der folgenden zutrifft:

• Ihr Team hat Vue-Entwickler, oder Sie erwarten, welche einzustellen.
• Sie möchten Creem zusätzlich zu Stripe, ohne es selbst zu integrieren.
• Ihr Deployment-Ziel ist Vercel, Netlify oder selbst-gehosteter Node – nicht Cloudflare Workers.
• Sie möchten einen SaaS-Starter, der sowohl als Next.js als auch als Nuxt ausgeliefert wird, und Sie planen, beide Codebases zu pflegen.

Entscheiden Sie sich für TanStack Ship, wenn mindestens eines der folgenden zutrifft:

• Ihr Team ist React-only und Sie möchten ein Boilerplate, das spezifisch auf das TanStack-Ökosystem verdrahtet ist.
• Sie möchten Cloudflare Workers + D1 + R2 + Queues + Workflows als Plattform, mit dem Kostennprofil, das das mit sich bringt.
• Sie möchten, dass TanStack Intent Agent Skills mit dem Paket ausgeliefert werden, nicht eine CLAUDE.md, die Sie von Hand pflegen.
• Sie möchten, dass die Billing-, E-Mail- und UTM-Module die Defaults sind, die aus der Postmortem-Serie hervorgegangen sind – dieselben Fixes, die den Queue-gestützten Write-Path, das Credit-Ledger und die idempotente Stripe-Webhook-Handhabung hervorgebracht haben.

Der Entscheidungsbaum hat bewusst keinen Mittelweg. Wenn Sie in keine der beiden Gruppen fallen, ist kein Boilerplate die richtige Antwort für Ihr Projekt – Sie würden für einen Starter zahlen, um eine Einschränkung zu lösen, für die er nicht konzipiert wurde.

Probieren Sie TanStack Ships kostenlosen Starter: Das TanStack-Ship-Repo liefert einen kostenlosen Starter mit Auth, Billing (Stripe + D1) und dem Blog-Modul, verdrahtet auf Cloudflare Workers + D1. Das Pro-Tier fügt UTM-Attribution, Referral-Guthaben, das AI-Integrationsmodul und die postmortem-defaultten E-Mail- + Monitoring-Module hinzu. Für die vollständige Preisübersicht: TanStack Ship pricing.

Wenn Sie Boilerplates breiter vergleichen, deckt der vs-shipfast-Vergleich den Next.js-+-Vercel-Incumbent ab, der vs-makerkit-Vergleich das B2B-Multi-Tenant-Segment, und der vs-next-forge-Vergleich die Premium-Tier-Option für Next.js. Jeder Vergleich folgt demselben Muster: erst die Stärken des Konkurrenten, dann die Positionierung. Durchsuchen Sie den vollständigen Alternatives-Index für alle Vergleiche.