Getting Started with TanStack Start

2025-03-01

An introduction to TanStack Start — a modern full-stack React framework built on TanStack Router with first-class TypeScript support and server-side rendering out of the box.

Welcome to TanStack Start

TanStack Start is a full-stack React framework built on top of TanStack Router. It brings together the best of modern web development: file-based routing, server-side rendering, TypeScript support, and seamless deployment to platforms like Netlify.

Whether you're building a simple blog or a complex application, TanStack Start gives you the tools to do it efficiently and with confidence.

Why TanStack Start?

There are many React frameworks available today, but TanStack Start stands out for a few key reasons:

  • Type-safe routing — Routes are fully typed end-to-end, from URL parameters to loader data. No more runtime surprises from mistyped route params.
  • Co-located data loading — Each route can define its own loader function that runs on the server before rendering, keeping data fetching close to where it's used.
  • Server functions — Write server-only logic (like database queries) directly alongside your components using createServerFn, with no separate API layer required.
  • Vite-powered — Enjoy fast hot module replacement during development and optimized production builds.

File-Based Routing

TanStack Start uses file-based routing, meaning the structure of your src/routes/ directory defines your application's URL structure. For example:

  • src/routes/index.tsx → /
  • src/routes/posts.$slug.tsx → /posts/:slug
  • src/routes/category.$category.tsx → /category/:category

Special files like __root.tsx define shared layouts that wrap all child routes, making it easy to add persistent navigation, headers, and footers.

Deploying to Netlify

TanStack Start and Netlify are a natural pairing. The @netlify/plugin-tanstack-router Vite plugin handles all the deployment configuration automatically. Once connected:

  • Server-side rendering runs via Netlify Functions
  • Static assets are served from Netlify's global CDN
  • Environment variables set in the Netlify dashboard are available to your server functions

What's Next?

This blog is built with TanStack Start and Content Collections — a type-safe content layer that validates your markdown frontmatter against a Zod schema. Every post you write is fully typed, so you'll catch schema errors at build time rather than at runtime.

Explore the source, customize the theme, and start adding your own posts to content/posts/. Happy building!