Architecture & Core Concepts

TanStack Start is best understood as server-enabling a TanStack Router app.

React Components
  -> TanStack Router: route tree, params, search, loaders
  -> TanStack Start: SSR, streaming, server functions, server routes
  -> Build/runtime: Vite or Rsbuild, deployment adapter

Route Tree as Contract

Router owns paths, search params, loaders, navigation, and route context. Start adds the execution environment around that contract.

Types flow into Link, navigate, Route.useParams(), Route.useSearch(), and Route.useLoaderData().

Client-Authored, Server-Powered

  • loaders handle route-critical data
  • server functions handle DB, secrets, and filesystem work
  • server routes expose public HTTP endpoints
  • middleware handles request context and auth

TanStack Query

Router loaders are good for route-critical data. TanStack Query is better for component-level server state, background refresh, and mutation cache.

Next Steps