Getting Started with TanStack Start

After spending a year building with Next.js at work, I was curious about TanStack Start — Tanner Linsley's take on a full-stack React framework. The marketing pitch is compelling: you get the ergonomics of TanStack Router (which is genuinely excellent) plus server functions and a streaming SSR story, without the App Router complexity.

The file-based routing

TanStack Router uses a code-gen approach where routes are defined as files, and a Vite plugin watches for changes and regenerates the route tree. It feels snappier than Next.js because the router itself is entirely client-side — there's no server-side routing layer to reason about.

// src/routes/blog/$slug.tsx
export const Route = createFileRoute('/blog/$slug')({
  loader: ({ params }) => fetchPost(params.slug),
  component: BlogPost,
})

The type safety here is remarkable. params.slug is correctly typed, and if you rename the file, TypeScript catches any broken references.

Server functions

The killer feature for me is createServerFn — a way to define server-only functions that can be called directly from components or loaders. No API route boilerplate, no fetch calls, just a function that runs on the server.

const getPost = createServerFn({ method: 'GET' })
  .validator(z.object({ slug: z.string() }))
  .handler(async ({ data }) => {
    return db.posts.findFirst({ where: { slug: data.slug } })
  })

Should you use it?

If you're starting a new project and want full-stack React without Next.js's opinions, TanStack Start is worth a serious look. The router type safety alone is a step ahead of anything else in the ecosystem.

The ecosystem is younger — fewer third-party integrations, less Stack Overflow — but the core is solid and the docs have improved substantially.