Getting Started with TanStack Start

TanStack Start is a modern full-stack framework built on top of TanStack Router. It provides a powerful foundation for building server-side rendered React applications.

Why TanStack Start?

• Type-safe server functions: Write backend code with full TypeScript support
• Flexible rendering: Full SSR, streaming, and progressive enhancement
• Modern tooling: Built with Vite for lightning-fast development

Installation

npm create @tanstack/start@latest my-app
cd my-app
npm install
npm run dev

Key Features

Server Functions

Server functions allow you to write backend code that's automatically available on the client:

import { createServerFn } from '@tanstack/start'

export const getUser = createServerFn('GET', async (userId: string) => {
  // This code runs only on the server
  return await db.user.findUnique({ where: { id: userId } })
})

File-based Routing

TanStack Start uses file-based routing. Create a file in src/routes and it automatically becomes a route:

src/routes/
  index.tsx        -> /
  about.tsx        -> /about
  blog/
    index.tsx      -> /blog
    $slug.tsx      -> /blog/:slug

Conclusion

TanStack Start provides a solid foundation for building modern web applications. Its type-safe approach and flexible rendering options make it a great choice for your next project.