Skip to content
Architecture 2026-07-01 10 min

TanStack Start Architecture

Server/client boundaries, data fetching, caching and deployment.

By Mohammad Zayed

Overview

Load data in route loaders and server functions, keep interactivity in client components, and ship the minimum client JavaScript.

Structure

src
src/routes/
  __root.tsx
  index.tsx
  dashboard.tsx
src/server/session.ts
components/ui/
lib/{db,auth}.ts

Data fetching

routes/dashboard.tsx
export const Route = createFileRoute("/dashboard")({
  loader: () => db.session.findMany({ take: 20 }),
  component: () => <Table data={Route.useLoaderData()} />,
});

Deploy

Deploy to a platform with regional functions; keep marketing routes static and dynamic routes isolated.

Frequently asked questions

Is this the only way to build it?
No. These are reference patterns we reuse. Adapt the boundaries to your constraints, team and compliance needs.
Should I copy this exactly?
Use it as a starting point. Validate each decision against your traffic, data sensitivity and team size.
Can NorthFlow implement this?
Yes. Book a strategy call and we'll tailor the architecture to your product.

Continue reading

All architecture notesEngineering insightsOur services

Want this architecture for your product?

Book a free strategy call. We'll map your bottlenecks to the right systems and send a clear roadmap — even if we don't work together.

Chat on Telegram

Usually replies within minutes. Chat on Telegram: @northflowstudio

No obligation consultationFounder-led projectsInternational clientsFast responseSecure communication