How does TanStack Start compare to Next.js?

TanStack Start aims to improve on Next.js by offering better type safety, a server-first approach, and higher performance while avoiding the breaking changes and 'bad vibes' associated with Next.js's evolution.

What is included with TanStack Start by default?

A new TanStack Start project comes with VEST for testing, Tailwind for styling, Tanstack router for routing, and TypeScript for end-to-end type safety.

How does TanStack Start handle server-side logic?

You can create 'server functions' that contain logic meant only for the server, like database operations or file system access, ensuring type safety across the network.

How are routes managed in TanStack Start?

TanStack Start uses file system-based routing via Tanstack router. Adding a new route is as simple as creating a new file in the designated 'routes' directory.

Can I load data before a route renders in TanStack Start?

Yes, you can specify any data a route needs using a 'loader,' which makes the data available before the route is rendered.

How do I create an API route in TanStack Start?

You can create an API route for handling raw HTTP requests by creating a file route with the 'server' property.

Key Moments

TanStack Start in 100 Seconds

Fireship

Science & Technology2 min read3 min video

Feb 20, 2026|335,100 views|14,770|590

webdev app development lesson tutorial tanstack tanstack start tanstack router react javascript next.js tanner linsley code

Save to Pod

Key Moments

TL;DR

TanStack Start: A type-safe, performance-focused React framework by Tanner Linsley.

Key Insights

TanStack Start is a new full-stack framework DX optimized for React and Solid.

It aims to address issues and complexity found in existing frameworks like Next.js.

The framework offers built-in features like SSR, streaming, bundling, and server functions.

TanStack Router powers TanStack Start, utilizing file-system based routing.

It emphasizes type safety across the network with server functions.

Configuration options and built-in tools include VEST, Tailwind, and TypeScript.

THE EVOLUTION OF REACT FRAMEWORKS

React, initially created in 2013 to simplify state management for Facebook developers, has seen significant evolution. The introduction of Next.js in 2016 brought server-side rendering and reduced client-side JavaScript, empowering many developers. However, as React itself evolved, so did Next.js, leading to breaking changes, security vulnerabilities, and a less than ideal developer experience over time. This created an opportunity for a new approach.

TANSTACK START: A NEW PHILOSOPHY

TanStack Start, developed by Tanner Linsley, emerges as a solution to the perceived shortcomings of existing frameworks. The core philosophy is to provide a highly performant, server-first, and type-safe React framework, minimizing heavy abstractions. It aims to offer a better developer experience by focusing on core functionalities without unnecessary complexity, promising a more streamlined development process for full-stack applications.

PROJECT SETUP AND CONFIGURATION

Getting started with TanStack Start is designed to be straightforward. A simple command initiates the project setup, offering various configuration options. Out of the box, a new project includes essential tools like VEST for testing, Tailwind CSS for styling, TanStack Router for routing, and TypeScript for end-to-end type safety, setting a solid foundation for development.

TYPE-SAFE SERVER FUNCTIONS

A key feature of TanStack Start is its emphasis on type safety, particularly with server functions. These functions encapsulate logic that should only execute on the server, such as database interactions or file system operations. They can be seamlessly integrated anywhere within the application, crucially maintaining type integrity across network boundaries, thus enhancing code reliability and reducing potential errors.

FILE-SYSTEM BASED ROUTING WITH TANSTACK ROUTER

TanStack Start leverages TanStack Router, which employs a file-system based routing convention. To add a new route, developers simply create a new file within the designated routes directory. This intuitive approach simplifies navigation management. Furthermore, data required for a specific route can be defined using a loader, ensuring that the data is available before the route renders, streamlining data fetching.

API ROUTES AND INTEGRATION

For handling raw HTTP requests, TanStack Start provides integrated support for creating API routes. Similar to creating regular routes, this is achieved by using the 'create file route' mechanism, but with the addition of a 'server' property. This allows developers to easily build backend endpoints within the same framework, maintaining consistency and simplifying the architecture for full-stack applications.

Mentioned in This Episode

●Software & Apps

●Concepts

●People Referenced

Getting Started with TanStack Start

Practical takeaways from this episode

Do This

Use TanStack Start for type-safe, server-first, high-performance React applications.

Leverage server functions for logic that should only run on the server (database, file system, env vars).

Create new routes by adding files in the 'routes' directory.

Specify data needs for a route using a loader.

Create API routes for handling HTTP requests by adding a file with the 'server' property.

Avoid This

Don't worry about heavy abstractions; TanStack Start aims to minimize them.

Don't sacrifice type safety across the network when using server functions.

Common Questions

TanStack Start is a full stack framework built on React, designed for developers seeking a type-safe, server-first, and highly performant experience without excessive abstraction.