A Production Architecture for TanStack Start

Overview

TanStack Start rewards a clear split between server and client code. The biggest wins come from moving data fetching into route loaders and server functions, rendering on the server, and shipping less JavaScript to the browser.

Folder structure

src/
  routes/
    __root.tsx
    index.tsx
    dashboard.tsx
  server/
    session.ts       # server functions
components/
  ui/
lib/
  db.ts
  auth.ts

Data fetching

export const Route = createFileRoute("/dashboard")({
  loader: async () => {
    return db.session.findMany({
      where: { userId: getUserId() },
      orderBy: { createdAt: "desc" },
      take: 20,
    });
  },
  component: () => {
    const sessions = Route.useLoaderData();
    return <SessionsTable data={sessions} />;
  },
});

Caching

Lean on the router's built-in loader caching and staleTime for repeated reads, and invalidate with router.invalidate() after writes. Measure cache hit rate before adding more layers.

Deployment

Deploy to a platform with edge or regional functions (Vercel, Cloudflare, or a Node host). Keep static marketing routes static and dynamic routes isolated.

Performance

Stream expensive parts with Suspense, and defer non-critical client JS.

FAQ

See the FAQ section above.