TanStack Start

TanStack Start is a full-stack React framework built on TanStack Router + Vite + Nitro. It provides file-based routing, server functions (RPC), SSR/SPA/static modes, and deploys anywhere (Cloudflare, Netlify, Vercel, Node, Bun).

Core API Quick Reference

Minimal Project Structure

src/
  routes/
    __root.tsx          # Root layout (shellComponent when SSR disabled)
    index.tsx           # /
    about.tsx           # /about
    posts/
      $postId.tsx       # /posts/:postId
  routeTree.gen.ts      # Auto-generated (never edit)
  router.tsx            # createRouter() entry
  client.tsx            # Client entry (StartClient)
  ssr.tsx               # SSR handler
app.config.ts           # tanstackStart() vite plugin config

File-Based Routing Key Conventions

• . in filename → / path separator (e.g., posts.index.tsx → /posts/)
• $param → dynamic segment
• _layout → pathless layout (no URL segment)
• (group) → route group (no URL impact)
• index.tsx → index route for a directory
• *.lazy.tsx → code-split lazy route

Core Dependencies

{
  "@tanstack/react-start": "latest",
  "@tanstack/react-router": "latest",
  "react": "^19.0.0",
  "vite": "^6.0.0",
  "vinxi": "latest"
}

References

• Documentation URL Map — fetch live docs via WebFetch
• Project Setup — scaffold, vite.config, tsconfig, router.tsx
• Routing & Navigation — file conventions, Link, hooks
• Data Loading — loaders, preloading, staleTime
• Server Functions — createServerFn, validation, errors
• Middleware — request/function middleware, context, global
• Server Routes — API routes, HTTP handlers, dynamic params
• Execution Model — isomorphic code, server/client boundaries
• SSR Modes — selective SSR, SPA, static prerendering, ISR
• Authentication — sessions, route protection, OAuth
• Environment Variables — VITE_ prefix, .env, type safety
• Import Protection — server/client enforcement, markers
• Tailwind & Styling — v4 setup, CSS imports
• SEO & Head — meta, OG, structured data, sitemaps
• Hosting & Deployment — Cloudflare, Netlify, Vercel
• Error Handling — boundaries, notFound, hydration errors
• React Query & tRPC — integration patterns
• Database Patterns — DB access, recommended providers