TanStack Start - Full-Stack React Framework | News

What is TanStack Start

TanStack Start is a full-stack React framework based on TanStack Router. It integrates type-safe routing, server functions, SSR/SSG, and is gaining attention as an alternative to Next.js.

Features

✓ Complete type safety
✓ File-based routing
✓ Server functions
✓ Streaming SSR
✓ Multiple deployment targets
✓ TanStack Query integration

Project Setup

npm create tanstack-start@latest my-app
cd my-app
npm install
npm run dev

File-Based Routing

app/
├── routes/
│   ├── __root.tsx      # Root layout
│   ├── index.tsx       # /
│   ├── about.tsx       # /about
│   ├── posts/
│   │   ├── index.tsx   # /posts
│   │   ├── $postId.tsx # /posts/:postId
│   │   └── new.tsx     # /posts/new
│   └── _auth/          # Layout group
│       ├── login.tsx
│       └── register.tsx
└── routes.gen.ts       # Auto-generated

Route Definition

Basic Route

// routes/index.tsx
import { createFileRoute } from '@tanstack/react-router';

export const Route = createFileRoute('/')({
  component: HomePage
});

function HomePage() {
  return <h1>Welcome to TanStack Start!</h1>;
}

Dynamic Route

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

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

function PostPage() {
  const { post } = Route.useLoaderData();
  return (
    <article>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </article>
  );
}

Server Functions

Definition and Usage

// app/serverFunctions/posts.ts
import { createServerFn } from '@tanstack/start';
import { z } from 'zod';

export const getPosts = createServerFn('GET', async () => {
  return db.posts.findMany();
});

export const createPost = createServerFn('POST', async (data) => {
  const validated = z.object({
    title: z.string(),
    content: z.string()
  }).parse(data);

  return db.posts.create({ data: validated });
});

Client-Side Invocation

// routes/posts/index.tsx
import { getPosts, createPost } from '../serverFunctions/posts';

export const Route = createFileRoute('/posts/')({
  loader: () => getPosts(),
  component: PostsPage
});

function PostsPage() {
  const posts = Route.useLoaderData();

  const handleCreate = async () => {
    await createPost({ title: 'New Post', content: 'Content' });
  };

  return (
    <div>
      {posts.map(post => <PostCard key={post.id} post={post} />)}
      <button onClick={handleCreate}>Create Post</button>
    </div>
  );
}

Data Fetching

Loader Pattern

export const Route = createFileRoute('/dashboard')({
  // Fetch data on server side
  loader: async ({ context }) => {
    const [user, stats] = await Promise.all([
      getUser(context.userId),
      getStats(context.userId)
    ]);
    return { user, stats };
  },
  // Show pending state
  pendingComponent: () => <div>Loading...</div>,
  // Show error state
  errorComponent: ({ error }) => <div>Error: {error.message}</div>,
  component: DashboardPage
});

TanStack Query Integration

import { createFileRoute } from '@tanstack/react-router';
import { useSuspenseQuery } from '@tanstack/react-query';

export const Route = createFileRoute('/posts/')({
  component: PostsPage
});

function PostsPage() {
  const { data: posts } = useSuspenseQuery({
    queryKey: ['posts'],
    queryFn: () => fetch('/api/posts').then(r => r.json())
  });

  return <PostList posts={posts} />;
}

Layouts

// routes/__root.tsx
import { createRootRoute, Outlet } from '@tanstack/react-router';

export const Route = createRootRoute({
  component: RootLayout
});

function RootLayout() {
  return (
    <html>
      <head>
        <meta charSet="utf-8" />
        <title>My App</title>
      </head>
      <body>
        <nav>
          <Link to="/">Home</Link>
          <Link to="/posts">Posts</Link>
        </nav>
        <main>
          <Outlet />
        </main>
      </body>
    </html>
  );
}

Type-Safe Links

import { Link } from '@tanstack/react-router';

// Type error: Missing parameters
<Link to="/posts/$postId">Post</Link>

// Correct usage
<Link to="/posts/$postId" params={{ postId: '123' }}>
  Post 123
</Link>

// Search parameters are also type-safe
<Link to="/search" search={{ q: 'react', page: 1 }}>
  Search
</Link>

Middleware

// app/middleware.ts
import { createMiddleware } from '@tanstack/start';

export const authMiddleware = createMiddleware({
  beforeLoad: async ({ context }) => {
    const session = await getSession();
    if (!session) {
      throw redirect({ to: '/login' });
    }
    return { ...context, session };
  }
});

// Use in routes
export const Route = createFileRoute('/dashboard')({
  middleware: [authMiddleware],
  component: Dashboard
});

Deployment

# Node.js
npm run build
npm start

# Cloudflare Workers
npm run build --preset cloudflare-pages

# Vercel
npm run build --preset vercel

# Netlify
npm run build --preset netlify

Summary

TanStack Start is a full-stack React framework with complete type safety and modern server capabilities. With TanStack Router’s powerful routing system and simple server functions, efficient full-stack development is possible.

← Back to list