Two answers to
the same question.

01 The one split everything follows from

Where does the work live?

A web app does a handful of jobs: match a route, fetch data, render the first screen, hydrate, then handle clicks and mutations. The frameworks disagree about the default home for each job. Read across each row to see where the two place the same work.

02 The machinery under each name

What they're built on.

Neither framework is one thing. Next.js is a tightly integrated Vercel toolchain; TanStack Start is a composition of independent libraries that also stand on their own. Tap any layer to expand it.

The shape is the point: Next.js owns its bundler, compiler and caching model end to end. TanStack Start borrows best-in-class tools — Vite, Nitro, Router — then wires them together.

03 One request, frame by frame

The live trace.

Press play and watch a single request travel three swim-lanes — Server, the Network, and the Browser. Scrub it, step it, or click any node to crack it open. Toggle the framework to see how Next front-loads the server while TanStack hands off to the browser early.

04 The same feature in both

Read a user, then change their name.

The clearest way to feel a framework is to write the same thing twice — load data on the server, mutate it from the client — in each idiom. Same job, two philosophies of how server and client talk.

// app/users/[id]/page.tsx — a React Server Component
import { updateName } from './actions'

export default async function Page({ params }) {
  const { id } = await params  // params is async in v16
  const user = await getUser(id)  // runs on the server, no fetch()

  return (
    <form action={updateName}>  // progressive-enhancement form
      <input name="name" defaultValue={user.name} />
      <input type="hidden" name="id" value={user.id} />
      <button>Save</button>
    </form>
  )
}

// app/users/[id]/actions.ts
'use server'  // this whole module is server-only
export async function updateName(form: FormData) {
  await db.user.update({
    where: { id: String(form.get('id')) },
    data:  { name: String(form.get('name')) },
  })
}

// src/routes/users.$id.tsx
import { createFileRoute } from '@tanstack/react-router'
import { createServerFn } from '@tanstack/react-start'

// server fns are RPC in the browser, direct calls on the server
const getUser = createServerFn({ method: 'GET' })
  .validator((id: string) => id)  // runtime + type validation
  .handler(({ data: id }) => db.user.find(id))

const updateName = createServerFn({ method: 'POST' })
  .validator((d: { id: string; name: string }) => d)
  .handler(({ data }) => db.user.update(data.id, { name: data.name }))

export const Route = createFileRoute('/users/$id')({
  loader: ({ params }) => getUser({ data: params.id }),  // SSR + client
  component: User,
})

function User() {
  const user = Route.useLoaderData()  // fully typed, no generics
  return <button onClick={() => updateName({ data: { id: user.id, name: 'New' } })}>
    {user.name}
  </button>
}

05 Where each can actually run

Deploy anywhere?

Runtime portability is one of the sharpest differences. Next.js is happiest on Vercel's Node + Edge; TanStack Start builds through Nitro for almost any target. Pick a deploy target and see how each framework reaches it.

06 Why each was built this way

What each was designed to solve.

Architectures are answers to specific pain. Next.js 16 is a course-correction on its own past; TanStack Start is a reaction to where the React ecosystem went.

07 Match the tool to your goal

How to choose.

There's no winner in the abstract — only a fit for your project. Tick the statements that are true for what you're building. The needle leans toward the framework whose design those goals reward.

08 Side by side, no spin

The honest sheet.

A flat comparison of the dimensions that actually decide projects — including where TanStack is still catching up.