TanStack Start on Netlify: Official Deployment Partner

When you meet Tanner Linsley, the creator and lead maintainer of TanStack, you’ll quickly see he’s guided by openness, community, and a belief in the betterment of the web. It’s made clear in the project’s ethos. And it’s infectious.

We’ve been guided by similar principles since day one. Which is one of the reasons we are so excited to announce that Netlify is now the official deployment partner and sponsor of TanStack Start—an open source, full-stack React framework that’s gaining momentum in the developer community.

As the official deployment partner for TanStack, it means further funding the development of their open-source framework and collaborating closely with the TanStack community to create an even better experience for TanStack developers on Netlify.

What makes TanStack special?

The momentum behind TanStack speaks for itself:

• Over 97,000 GitHub stars across the TanStack toolkit
• An adoption pace on par with breakout frameworks like Next.js and Astro

And remarkably, all this growth has happened with just one full-time developer and a small group of passionate maintainers, without any traditional VC funding.

For an overview of TanStack watch Tanner’s talk at Compose: An early glimpse at TanStack Start.

TanStack provides a refreshing take on building dynamic web apps. If you haven’t tried the TanStack tools–including TanStack Query, Router, and Table–you’re in for a treat. These aren’t just libraries, but tools that address real-world development challenges you’ve likely run into hundreds of times in thoughtful, ergonomic ways.

How TanStack Start compares to Next.js

Next.js has established itself as a leading React framework with good reason. It offers powerful features and a mature ecosystem. As developers evaluate newer options like TanStack Start, it’s helpful to understand the different approaches and where each framework excels:

Feature	TanStack Start	Next.js
Philosophy	Client-first approach with flexible architecture	Server-first approach with structured conventions
Developer experience	Function-based routing with emphasis on type safety	File-based routing with extensive built-in optimizations
Maturity	Newer but rapidly evolving	Established ecosystem with extensive resources
Data Fetching	Seamless integration with TanStack Query	Comprehensive built-in data fetching patterns

Where TanStack Start offers different approaches:

Type-safe routing vs. file-based routing

Unlike Next.js’s file-based routing, TanStack Start uses function-based route definitions that ensure type safety and reduce runtime errors:

import { createRoute, createRouter } from '@tanstack/router';

// Define routes with full type safety
const postsRoute = createRoute({
  path: '/posts',
  component: PostsComponent,
});

function PostsComponent() {
  const params = postsRoute.useParams(); // Type-safe access to route params
  const search = postsRoute.useSearch(); // Type-safe access to query params

  return (
    <div>
      <h1>Posts</h1>
      <p>Params: {JSON.stringify(params)}</p>
      <p>Search: {JSON.stringify(search)}</p>
    </div>
  );
}

// Create a router
const router = createRouter({
  routes: [postsRoute],
});

This approach gives you complete type safety across your application, eliminating an entire category of routing-related bugs that can occur in file-based systems.

Flexible server functions with createServerFn

While Next.js ties server actions to React Server Components with the “use server” directive, TanStack’s approach offers more flexibility and developer control:

import { createServerFn } from '@tanstack/start';

// Define a server function
export const getServerTime = createServerFn()
  .handler(async () => {
    await new Promise((resolve) => setTimeout(resolve, 1000)); // Simulate delay
    return new Date().toISOString(); // Return current time
  });

// Usage example
getServerTime().then((time) => console.log('Server Time:', time));

This approach allows you to use server functions anywhere while maintaining full type safety between client and server. You’ll never have to wonder if that component should be a client or server again.

Data management with TanStack Query

TanStack Start’s native integration with TanStack Query provides advanced caching and efficient data management that goes beyond Next.js’s built-in data fetching:

import { QueryClient, QueryClientProvider, useQuery } from '@tanstack/react-query';

const queryClient = new QueryClient();

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <Posts />
    </QueryClientProvider>
  );
}

function Posts() {
  const { data, isLoading, error } = useQuery(['posts'], fetchPosts);

  if (isLoading) return <p>Loading...</p>;
  if (error) return <p>Error: {error.message}</p>;

  return (
    <ul>
      {data.map((post) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
}

async function fetchPosts() {
  const response = await fetch('/api/posts');
  if (!response.ok) throw new Error('Failed to fetch posts');
  return response.json();
}

This integration gives you powerful tools for handling loading states, errors, and cache invalidation with a lot less boilerplate.

When to try TanStack Start: AI chatbot template

As you can see, TanStack is introducing a new, fresh way forward. Where TanStack Start truly shines is in its developer experience – the framework gets out of your way while giving you the tools to build complex, interactive applications with confidence. You should give TanStack Start a spin if you’re frustrated with bloated, over-abstracted frameworks, tired of fighting TypeScript errors in your routes, or spending too much time writing boilerplate for data fetching.

We’ve seen developers reach for TanStack Start when building applications where the frontend experience is critical: data-heavy dashboards, multi-step workflows, real-time collaborative tools, and AI-powered interfaces.

To help you jump in, we’ve created a fullstack AI chatbot starter template that combines TanStack’s data management capabilities with Netlify Functions:

npx create-tsrouter-app@latest <name> --template file-router --add-ons tanchat

The starter template includes:

• Modern chat interface built with TanStack Start, React 19, and Tailwind 4
• Efficient routing with TanStack Router
• State management with TanStack Store
• Claude AI integration using Anthropic’s API
• Optional Convex database integration for data persistence
• Error monitoring with Sentry
• Production-ready deployment configuration for Netlify

What’s next for TanStack and Netlify?

We’re committed to being the best supporter we can while also being the best platform for building and deploying TanStack applications, and we’ll achieve this by working closely with the community.

TanStack Start is a promising option for teams that:

• Value type safety and clean architectural patterns
• Want to avoid vendor lock-in with hosting providers
• Need both client and server capabilities but prefer a client-first approach
• Are building complex interactive UIs with sophisticated data requirements
• Value architectural freedom and developer control

While we’re thrilled to partner with TanStack Start, it’s worth noting that Netlify works with all modern frameworks. Our platform is designed to automate deployment and operations for any web project, regardless of which framework you choose.

Whether you’re building with TanStack Start, Next.js, Astro, Nuxt, or Remix, Netlify provides the same benefits of automated workflows, instant deployments, and global edge delivery. You can always check our Framework Guides for up-to-date compatibility information and optimization tips for your framework of choice. As new frameworks emerge and existing ones evolve, we’re committed to helping developers take advantage of the best the web has to offer, on your terms.

Learn more about TanStack on Remote Desk

Join us March 31 for a special TanStack Start episode on our new Remote Desk series. We’ll be diving into live demos, developer tips, and a live Q&A. See TanStack Start in action and learn how to leverage its full potential on Netlify.