DEV Community

Alex Spinov
Alex Spinov

Posted on

TanStack Start Has a Free API — Full-Stack React Framework with Type-Safe Routing

What if your React framework gave you end-to-end type safety from database to component — without code generation or build steps?

TanStack Start is a full-stack React framework built on TanStack Router, Vinxi, and Nitro.

Why TanStack Start

Next.js popularized React server frameworks. TanStack Start takes a different approach:

  • 100% type-safe routing — every route param, search param, and loader is typed
  • Server functions — call server code from client with full type inference
  • No magic — explicit data loading, no hidden caching rules
  • Deploy anywhere — powered by Nitro (Vercel, Cloudflare, Node, Deno)
  • TanStack Router — the most type-safe router in the React ecosystem

Quick Start

npx create-tanstack-app my-app
cd my-app && npm install && npm run dev
Enter fullscreen mode Exit fullscreen mode

Type-Safe Routes

// routes/posts/$postId.tsx
import { createFileRoute } from "@tanstack/react-router";

export const Route = createFileRoute("/posts/$postId")({
  loader: async ({ params }) => {
    // params.postId is fully typed
    const post = await fetchPost(params.postId);
    return { post };
  },
  component: PostPage,
});

function PostPage() {
  const { post } = Route.useLoaderData();
  // post is fully typed — no `as any`, no runtime surprises
  return <h1>{post.title}</h1>;
}
Enter fullscreen mode Exit fullscreen mode

Server Functions

// Call server code from client — fully typed
const serverFn = createServerFn("GET", async (postId: string) => {
  const db = getDatabase();
  return db.posts.findById(postId); // Runs on server only
});

// In your component
const post = await serverFn("123"); // TypeScript knows the return type
Enter fullscreen mode Exit fullscreen mode

Real Use Case

A startup had a Next.js app with 200+ routes. Type errors in route params caused 3 production incidents in one quarter — wrong param names, missing search params, loader data mismatches. After migrating to TanStack Start, the compiler caught every route error at build time. Zero route-related incidents since.

When to Use TanStack Start

✅ Type-safety-obsessed React teams
✅ Complex apps with many dynamic routes
✅ Projects needing multi-platform deployment
✅ Teams tired of Next.js caching surprises

❌ Simple landing pages (overkill)
❌ Non-React projects (Vue → use Nuxt)

Get Started

Visit tanstack.com/start — open source, MIT licensed.


Need custom data pipelines or scraping solutions? Check out my Apify actors or email me at spinov001@gmail.com for custom solutions.

Top comments (0)