Back to Skills

tanstack-start

Full-stack React framework powered by TanStack Router with SSR, streaming, server functions, and deployment to any hosting provider.

22stars1forksUpdated 6/29/2026

Security Assessment

Safe(100/100)
Security Score100/100

About tanstack-start

Covers TanStack Start, a full-stack React framework built on TanStack Router and powered by Vite and Nitro via Vinxi. It provides server-side rendering, streaming, server functions (RPC), middleware, API routes, and deployment to any platform through Nitro presets. The package is @tanstack/react-start with the @tanstack/router-plugin, and the doc notes the framework is at Release Candidate status with React Server Components support in active development as a non-breaking v1.x addition.

The guide walks through project setup via npx @tanstack/cli create or manual npm installation, the standard app directory structure (routes, client.tsx, router.tsx, ssr.tsx, the auto-generated routeTree.gen.ts), and configuration in app.config.ts including the server preset and tsr options. It documents server functions through createServerFn, distinguishing GET handlers for cacheable data fetching from POST handlers for mutations, with input validation via a .validator() that accepts plain functions or Zod schemas for full type inference. Middleware is covered through createMiddleware, including logging, auth middleware that reads the web request and redirects unauthenticated users, and chaining middleware to pass typed context to handlers.

Additional sections show API routes via createAPIFileRoute, streaming SSR with loaders that defer non-critical data using defer() and render it with Suspense and Await, and deployment presets for node-server, vercel, netlify, cloudflare-pages, aws-lambda, deno-server, and bun. Best practices recommend validators on all server function inputs, composing middleware for cross-cutting concerns, using GET for fetching and POST for mutations, beforeLoad for route-level auth guards, and defaultPreload set to intent for instant navigation. Common pitfalls are enumerated, including that server functions cannot close over client-side variables, returned data must be serializable, missing await in loaders breaks streaming, importing server-only code into client bundles causes build errors, and omitting the declare module augmentation loses all type safety.

FAQ

What is TanStack Start built on?

It is a full-stack React framework built on TanStack Router, powered by Vite and Nitro via Vinxi. The main package is @tanstack/react-start with the @tanstack/router-plugin.

How do server functions differentiate data fetching from mutations?

Use createServerFn() with a GET handler for cacheable, preloadable data fetching, and createServerFn({ method: 'POST' }) for mutations and side effects. Inputs should be wrapped in a .validator(), which accepts plain functions or Zod schemas.

Which deployment platforms are supported?

Deployment uses Nitro presets configured in app.config.ts, including node-server, vercel, netlify, cloudflare-pages, aws-lambda, deno-server, and bun.

How do I protect a route with authentication?

Create auth middleware with createMiddleware that reads the web request, checks the session, and throws redirect to /login if unauthenticated, passing typed context (such as the user) to the handler. The best practices also recommend beforeLoad for route-level auth guards.

What are common pitfalls to avoid?

Server functions cannot close over client-side variables and their returned data must be serializable. Forgetting await in loaders breaks streaming, importing server-only code into client bundles causes build errors, and missing the declare module augmentation loses all type safety.

Install tanstack-start

Download and extract the skill files to your .claude/skills/ directory.

Quick Setup:

  1. Copy the skill folder to .claude/skills/
  2. Claude will automatically detect and use the skill