TanStack Router at Scale: Inside X.com's Web Rewrite

Something significant happened in the frontend world on July 4, 2026: X.com quietly launched a complete rewrite of its web platform, starting with logged-out pages. The stack? TanStack Router, Tailwind CSS, Vite, and Rolldown — the modern web practices that developers have been advocating for years, now running at the scale of one of the internet's busiest platforms.

For many developers, this confirmation validates a growing belief: TanStack Router has graduated from "interesting alternative" to "production-proven infrastructure."

What Is TanStack Router?

TanStack Router is a type-safe, client-side routing library for React applications. Unlike Next.js's routing system — where routes are tied to the filesystem and server-side conventions — TanStack Router gives developers explicit, granular control over routing behavior while maintaining full TypeScript type inference at every level.

Developed by Tanner Linsley and the TanStack team, it powers TanStack Start (the full-stack framework), but can also be used standalone for SPAs and applications that manage their own server layer.

TanStack Router vs TanStack Start

Understanding the distinction matters:

• TanStack Router — the routing engine. Handles client-side navigation, search params, nested layouts, and data loading with 100% type safety.
• TanStack Start — the full-stack framework built on top of TanStack Router, adding SSR, server functions, and Nitro-powered deployment.

X.com's web rewrite used TanStack Router specifically, integrated with Vite and Rolldown for the build layer.

Why Type-Safe Routing Matters

The biggest developer-experience win in TanStack Router is its route tree type inference. Every route, every search parameter, and every loader return type is fully typed end-to-end — without any manual type declarations.

Defining a Route

// routes/index.tsx
import { createFileRoute } from '@tanstack/react-router'
 
export const Route = createFileRoute('/')({
  component: HomePage,
})
 
function HomePage() {
  return <h1>Welcome</h1>
}

Type-Safe Navigation

import { Link } from '@tanstack/react-router'
 
// TypeScript will error if '/profile' is not a registered route
<Link to="/profile/$userId" params={{ userId: '123' }}>
  View Profile
</Link>

Typos in route paths get caught at compile time, not at runtime in a user's browser.

Loading Data with Route Loaders

TanStack Router's loader option runs before a route component renders, enabling data fetching with proper loading states:

export const Route = createFileRoute('/posts')({
  loader: async () => {
    const response = await fetch('/api/posts')
    return response.json()
  },
  component: PostsPage,
})
 
function PostsPage() {
  const posts = Route.useLoaderData()
  return (
    <ul>
      {posts.map(post => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  )
}

The return type of loader is automatically inferred — useLoaderData() returns a fully typed result with no casting needed.

SSR Streaming at Scale

One of the features in X.com's rewrite is SSR Streaming — the ability to progressively send HTML to the browser as the server renders it. This dramatically improves Time to First Byte and perceived performance.

TanStack Router supports streaming through its Vite integration. The Await component handles deferred data gracefully:

import { Await } from '@tanstack/react-router'
 
export const Route = createFileRoute('/dashboard')({
  loader: async () => {
    const criticalData = await fetchCriticalData()
    const heavyData = fetchHeavyData() // not awaited — streams in later
    return { criticalData, heavyData }
  },
  component: Dashboard,
})
 
function Dashboard() {
  const { criticalData, heavyData } = Route.useLoaderData()
 
  return (
    <div>
      <CriticalSection data={criticalData} />
      <Suspense fallback={<Spinner />}>
        <Await promise={heavyData}>
          {data => <HeavySection data={data} />}
        </Await>
      </Suspense>
    </div>
  )
}

Critical content renders immediately; heavy data streams in without blocking the page.

Vite + Rolldown: The Build Layer

X.com's choice to pair TanStack Router with Vite and Rolldown reflects a broader 2026 ecosystem shift. Vite 8, released in March 2026, ships Rolldown as its unified bundler — a Rust-based replacement for the previous esbuild/Rollup split.

The production impact is real:

• Builds that previously took 30+ seconds now finish in under 10 seconds
• Real-world SPAs switching to Rolldown see build time reductions of 60 to 70 percent
• Hot Module Replacement performance improves from the same Rust-powered core

For a platform at X.com's scale, these numbers translate to faster CI/CD pipelines and a meaningfully better developer experience across a large engineering team.

Nested Layouts and Shared UI

One of TanStack Router's strongest features is its nested layout system. Routes share parent layout components without re-rendering:

// routes/__root.tsx
import { createRootRoute, Outlet } from '@tanstack/react-router'
 
export const Route = createRootRoute({
  component: () => (
    <div>
      <Header />
      <Outlet />
      <Footer />
    </div>
  ),
})

Child routes render inside the Outlet while the parent layout stays mounted. This avoids the full-page re-renders that slow down navigation-heavy applications.

Type-Safe Search Parameters

Search params are a common source of runtime bugs — they arrive as raw strings and must be parsed, validated, and synchronized with UI state. TanStack Router handles this automatically:

import { createFileRoute } from '@tanstack/react-router'
import { z } from 'zod'
 
const searchSchema = z.object({
  page: z.number().default(1),
  q: z.string().optional(),
})
 
export const Route = createFileRoute('/search')({
  validateSearch: searchSchema,
  component: SearchPage,
})
 
function SearchPage() {
  const { page, q } = Route.useSearch()
  // page is number, q is string | undefined — fully typed
  return <Results page={page} query={q} />
}

Search params are validated, typed, and serialized automatically. No manual parsing needed.

Getting Started

Scaffold a new TanStack project with the CLI:

npx @tanstack/cli@latest create

The CLI guides you through package manager selection, Tailwind CSS setup, and deployment target. For a standalone TanStack Router SPA without a server layer:

npm install @tanstack/react-router

Official examples cover Basic, Auth, Clerk, Supabase, Convex, and WorkOS integrations — all available through the TanStack CLI or StackBlitz previews in the documentation.

What X.com's Adoption Means

When a platform at X.com's scale chooses a framework for a complete web rewrite, it is not a casual decision. The choice of TanStack Router plus Vite plus Rolldown signals that this stack is:

1. Stable enough for production — TanStack Router is in Release Candidate stage with a stable, locked API
2. Performant at scale — SSR Streaming and Rolldown builds meet the performance bar of one of the web's highest-traffic applications
3. Maintainable for large teams — TypeScript-first design catches routing errors at compile time across a large codebase

For developers evaluating alternatives to Next.js, this kind of validation matters. It is one thing to read benchmarks; it is another to see the stack powering a platform that serves hundreds of millions of users daily.

Conclusion

TanStack Router's core value proposition — type-safe routing, explicit data loading, composable nested layouts — has been sound since its early releases. X.com's production adoption confirms that these properties hold at scale.

Whether you are starting a new project or evaluating a migration, TanStack Router offers a compelling combination of developer experience and runtime performance. Pair it with Vite, Rolldown, and TanStack Start for full-stack needs, and you have a stack that is proven at the highest levels of production traffic.

The logged-out pages of X.com are now a live demonstration. Start building with the same stack today.