Built with React 19, TypeScript & Vite
TanStack StartTemplate
A modern, type-safe, full-stack React framework combining the power of TanStack Router and Query with the latest web technologies. Start building production-ready applications today.
Trusted by developers building modern web applications
Everything you need to build modern web apps
A carefully curated stack of the best tools and libraries for React development
Type-Safe
TanStack Router
Type-safe, file-based routing with powerful features like nested layouts, loaders, and search params validation.
Server State
TanStack Query
Powerful data synchronization with server state management, caching, and background updates built-in.
Latest
React 19
Latest React with concurrent features, improved performance, and modern development patterns.
Fast
Vite
Lightning-fast build tool with hot module replacement and optimized production builds.
Type-Safe
TypeScript
Full TypeScript support with strict typing, IntelliSense, and compile-time error checking.
Styling
Tailwind CSS v4
Modern utility-first CSS framework with CSS variables and a comprehensive design system.
Performance
SSR Ready
Server-side rendering support with seamless hydration and SEO optimization out of the box.
Components
Shadcn/UI
Beautiful, accessible component library with customizable themes and modern design patterns.
Server Functions & Middleware
Server-Side Data Flow
See TanStack Start's middleware and server functions in action with TanStack Query. Check your server logs to see the execution flow!
Interactive Demo
Execute a server function with middleware through TanStack Query
What's Happening
The execution flow and server-side processing
Execution Flow
- 1Client sends request via TanStack Query mutation
- 2Middleware executes first (adds context data)
- 3Input validation with Zod schema
- 4Server function handler executes
- 5Response sent back to client
Check your server logs! You'll see console output from both the middleware and server function execution.
Files involved:
- •
src/core/middleware/example-middleware.ts - •
src/core/functions/example-functions.ts
Key Benefits
Type-Safe
Full TypeScript support with Zod validation
Server-First
Execute secure server-side logic seamlessly
Middleware Ready
Composable middleware for authentication, logging, etc.