Skip to main content

​
What is TanStack Start?

TanStack Start is a full-stack web framework built on top of TanStack Router that brings server-side rendering (SSR), streaming, server functions, API routes, and deployment capabilities to your applications. While TanStack Router provides type-safe client-side routing with powerful data loading, TanStack Start extends these capabilities to the server, giving you a complete solution for building modern web applications.

​
TanStack Start vs TanStack Router

Understanding the relationship between these two libraries is important:

​
TanStack Router

  • Client-side routing with type-safe navigation
  • Route loaders and data fetching
  • Search params and path params validation
  • Prefetching and caching
  • File-based or code-based routing
  • Works in any React, Solid, or Vue application

​
TanStack Start

  • Everything in TanStack Router, plus:
  • Server-side rendering (SSR) and streaming
  • Server functions with type-safe RPC
  • Vite-powered bundling and development
  • Built-in deployment adapters
  • Full-stack type safety from server to client
  • Production-ready server infrastructure
Think of TanStack Router as the foundation for client-side routing, and TanStack Start as the full-stack framework that includes Router plus server capabilities.

​
Key Features

Server Functions

Call server-side code from your client with full type safety and automatic RPC

SSR & Streaming

Server-side rendering with streaming support for faster initial page loads

Type-Safe RPC

End-to-end type safety from your server functions to client calls

Vite Integration

Lightning-fast development with Vite’s hot module replacement

​
Server Functions

One of the most powerful features of TanStack Start is server functions. These allow you to write server-side code that can be called directly from your client components with full type safety: 
import { createServerFn } from '@tanstack/react-start'

// Define a server function
export const getUser = createServerFn({ method: 'GET' })
  .inputValidator((id: string) => id)
  .handler(async ({ data: userId }) => {
    // This code runs only on the server
    const user = await db.users.findById(userId)
    return user
  })

// Call it from your client
function UserProfile({ userId }: { userId: string }) {
  const user = await getUser({ data: userId })
  return <div>{user.name}</div>
}
The server function is automatically converted to an API endpoint, and the client call becomes a type-safe RPC call.

​
Framework Support

TanStack Start is available for multiple frameworks: 
npm install @tanstack/react-start
TanStack Start for React includes support for React Server Components patterns and streaming SSR.

​
How It Works

TanStack Start uses Vite to bundle both your client and server code:
  1. Development: Run vite dev to start a development server with hot module replacement
  2. Server Functions: The Vite plugin transforms server functions into API endpoints
  3. SSR: Pages are rendered on the server first, then hydrated on the client
  4. Streaming: Use React Suspense (or framework equivalent) to stream content as it loads
  5. Deployment: Build outputs can be deployed to various platforms (Netlify, Vercel, Cloudflare, etc.)

​
Architecture

TanStack Start follows a client-first architecture:
  • Server Entry: Handles incoming requests
  • Router Match: Determines which route to render
  • Route Loaders: Execute server-side data loading
  • Server Functions: Run server-only code
  • SSR Render: Renders the initial HTML
  • HTML Stream: Streams HTML to the client
  • Client Hydration: Makes the page interactive

​
When to Use TanStack Start

Choose TanStack Start when you need:
Server-side rendering for SEO or performance
Server functions to securely access databases or APIs
Streaming to improve perceived performance
Full-stack type safety
A complete deployment solution
Stick with TanStack Router alone if you’re building:
A client-side only application (SPA)
An app that uses an existing backend API
A static site that doesn’t need server functions

​
Deployment Ready

TanStack Start uses Nitro under the hood, which provides:
  • Universal deployment adapters for multiple platforms
  • Auto-detected deployment configuration
  • Production-optimized builds
  • Serverless and edge runtime support
Deployment targets include:
  • Netlify
  • Vercel
  • Cloudflare Workers/Pages
  • AWS Lambda
  • Node.js servers
  • And many more

​
Next Steps

Installation

Install TanStack Start and set up your development environment

Quickstart

Build your first full-stack app with server functions

Server Functions

Learn how to use server functions for secure server-side operations

SSR Guide

Understand server-side rendering and streaming

Build docs developers (and LLMs) love

Get started for freeTalk to us