tanstack-start
TanStack Start is a full-stack React framework built on TanStack Router, Vite, and Nitro that enables server-side rendering, streaming, and type-safe server functions for building modern applications. Deploy to any platform using Nitro presets including Vercel, Netlify, Cloudflare, AWS Lambda, and self-hosted Node.js environments.
TanStack Start is a full-stack React framework that combines TanStack Router with server functions, SSR, and streaming for any hosting platform.
AI-generated summary based on this skill's SKILL.md
Install
tanstack-skills/tanstack-skills/tanstack-start
git clone https://github.com/tanstack-skills/tanstack-skills
cp -r tanstack-skills/plugins/tanstack-start/skills/tanstack-start ~/.claude/skills/tanstack-startFrequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
What is TanStack Start and how does it build a full-stack React app?
TanStack Start is a full-stack React framework built on TanStack Router, Vite, and Nitro that enables server-side rendering, streaming, and type-safe server functions for building modern applications. It combines client and server capabilities in a single framework, allowing you to write server functions alongside your React components and handle SSR seamlessly.
How do I create server functions in TanStack Start with type safety?
TanStack Start provides type-safe server-to-client RPC with validation through server functions. You define server functions that are automatically type-checked and validated, enabling secure communication between your client and server. The framework handles serialization and validation automatically, ensuring your data contracts are maintained across the network boundary.
How do I set up middleware and authentication in TanStack Start?
TanStack Start supports middleware and route guards for implementing authentication. You can create middleware that runs on both server and client to protect routes, validate sessions, and enforce access control. This allows you to build secure applications with authentication flows integrated directly into your routing layer.
Can I deploy TanStack Start to Vercel and other hosting platforms?
TanStack Start deploys to multiple hosting platforms using Nitro presets, including Vercel, Netlify, Cloudflare, AWS Lambda, and self-hosted Node.js environments. This flexibility lets you choose your hosting provider without changing your application code, making it easy to migrate or scale across different infrastructure.
How does TanStack Start handle server-side rendering and streaming?
TanStack Start optimizes streaming SSR and deferred data loading to improve performance and user experience. The framework supports streaming responses that progressively render content to the client, reducing time-to-first-byte and enabling better perceived performance for data-heavy applications.
What is the difference between TanStack Start and Next.js?
TanStack Start is built on TanStack Router and Nitro, offering a different architecture than Next.js. While both enable full-stack React development, TanStack Start emphasizes type-safe server functions, flexible routing with TanStack Router, and deployment flexibility through Nitro presets rather than being tied to Vercel.
SKILL.md
rendered from the published skill — quoted content, verbatim
TanStack Start Skills
Overview
TanStack Start is a full-stack React framework built on TanStack Router, powered by Vite and Nitro (via Vinxi). It provides server-side rendering, streaming, server functions (RPC), middleware, API routes, and deploys to any platform via Nitro presets.
Package: @tanstack/react-start
Router Plugin: @tanstack/router-plugin
Build Tool: Vinxi (Vite + Nitro)
Status: RC (Release Candidate)
RSC Support: React Server Components support is in active development and will land as a non-breaking v1.x addition
Installation & Project Setup
npx @tanstack/cli create my-app
# Or manually:
npm install @tanstack/react-start @tanstack/react-router react react-dom
npm install -D @tanstack/router-plugin typescript vite vite-tsconfig-paths
Project Structure
``` my-app/ app/ routes/ __root.tsx # Root layout index.tsx # / route posts.$postId.tsx # /posts/:postId api/ users.ts #
(truncated - see the full file via the links below)
Read as markdown · JSON record · Browse the source repository
File tree — 1 file
plugins/tanstack-start/skills/tanstack-start/SKILL.md