# Comparison | TanStack Start vs Next.js vs React Router

This matrix compares full-stack framework capabilities. For the choice between Start and Next.js, read [TanStack Start vs Next.js](./start-vs-nextjs). For navigation and URL-state APIs, see the [TanStack Router comparison](/router/latest/docs/comparison).

Checked September 11, 2026 against the linked documentation: TanStack Start's current guides, Next.js 16.3 App Router, and React Router 8.3 Framework Mode.

## Rendering and data

| Capability                    | TanStack Start                                                                                                                    | Next.js App Router                                                                                                                                        | React Router Framework Mode                                                                                            |
| ----------------------------- | --------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------- |
| Server rendering              | [SSR with hydration by default](./overview)                                                                                       | [Server and Client Components contribute to initial HTML](https://nextjs.org/docs/app/getting-started/server-and-client-components)                       | [Server rendering is configurable](https://reactrouter.com/start/framework/rendering)                                  |
| Rendering control             | [Per-route full, data-only, or disabled SSR](./guide/selective-ssr)                                                               | [Server/Client Component boundaries](https://nextjs.org/docs/app/getting-started/server-and-client-components); `use client` does not disable initial SSR | [Global SSR setting and route-level client loaders](https://reactrouter.com/start/framework/rendering)                 |
| SPA applications              | [Dedicated SPA mode](./guide/spa-mode)                                                                                            | [Documented SPA patterns](https://nextjs.org/docs/app/guides/single-page-applications)                                                                    | [`ssr: false`](https://reactrouter.com/start/framework/rendering)                                                      |
| Static output                 | [Prerendering configuration](./guide/static-prerendering)                                                                         | [Static export](https://nextjs.org/docs/app/guides/static-exports), with server-feature limitations                                                       | [Prerender selected URLs](https://reactrouter.com/start/framework/rendering)                                           |
| React Server Components       | [Experimental, opt-in](./guide/server-components)                                                                                 | [Core App Router component model](https://nextjs.org/docs/app/getting-started/server-and-client-components)                                               | [Unstable RSC integration](https://reactrouter.com/how-to/react-server-components)                                     |
| Client data reuse             | [Router loader caching](/router/latest/docs/guide/data-loading), plus [Query integration](/router/latest/docs/integrations/query) | [Navigation caching and server cache APIs](https://nextjs.org/docs/app/getting-started/caching); a query library can manage additional client data        | [Loader/action revalidation](https://reactrouter.com/start/framework/actions); separate client-data tools can be added |
| Revalidation after deployment | [HTTP caching and provider-specific ISR configuration](./guide/isr)                                                               | [ISR and cache coordination](https://nextjs.org/docs/app/guides/self-hosting)                                                                             | [HTTP response headers](https://reactrouter.com/how-to/headers) and deployment infrastructure                          |

A client loader cache, a cached server result, and a cached HTML response are different things. Compare invalidation behavior, persistence, and multi-instance coordination for the layer your application needs. A CDN honoring `stale-while-revalidate` is not proof of identical ISR behavior across providers.

## Server APIs and forms

| Capability                 | TanStack Start                                                                                                 | Next.js App Router                                                                                                                                      | React Router Framework Mode                                                                   |
| -------------------------- | -------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------- |
| Server calls and mutations | [Typed server functions with GET or POST](./guide/server-functions)                                            | [Server Actions](https://nextjs.org/docs/app/guides/forms)                                                                                              | [Route actions and fetchers](https://reactrouter.com/start/framework/actions)                 |
| Input validation           | [Validator API with inferred types](./guide/server-functions)                                                  | [Validate action input with application code or a schema](https://nextjs.org/docs/app/guides/forms)                                                     | [Validate action input with application code](https://reactrouter.com/how-to/form-validation) |
| Middleware                 | [Request middleware and client/server function middleware](./guide/middleware)                                 | [Request interception with Proxy](https://nextjs.org/docs/app/getting-started/proxy); action authorization belongs in server code                       | [Server and client route middleware](https://reactrouter.com/how-to/middleware)               |
| Form handling              | [Server functions](./guide/server-functions) can be called from event handlers; use a form library when needed | [Built-in `next/form`](https://nextjs.org/docs/app/api-reference/components/form), plus [Server Action forms](https://nextjs.org/docs/app/guides/forms) | [`Form`, actions, and fetchers](https://reactrouter.com/start/framework/actions)              |
| Server endpoints           | [Server routes](./guide/server-routes)                                                                         | [Route Handlers](https://nextjs.org/docs/app/getting-started/route-handlers)                                                                            | [Resource routes](https://reactrouter.com/how-to/resource-routes)                             |

Type inference helps callers write valid code. It does not validate an incoming HTTP request or authorize access to a record. All three frameworks need runtime validation and server-side authorization for private operations. For Start, see [Authentication Server Primitives](./guide/authentication-server-primitives).

## Tooling and deployment

| Capability              | TanStack Start                                                                                                      | Next.js App Router                                                                                                                                               | React Router Framework Mode                                                                   |
| ----------------------- | ------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------- |
| Build integration       | [Vite or Rsbuild](./build-from-scratch)                                                                             | [Turbopack](https://nextjs.org/docs/app/api-reference/turbopack)                                                                                                 | [Framework tooling](https://reactrouter.com/start/framework/installation)                     |
| Type support            | [Router inference](/router/latest/docs/guide/type-safety) and [server function inference](./guide/server-functions) | [Stable opt-in typed links](https://nextjs.org/docs/app/api-reference/config/next-config-js/typedRoutes) and TypeScript APIs                                     | [Generated route-module types](https://reactrouter.com/how-to/route-module-type-safety)       |
| Metadata                | [Route head management and SEO guide](./guide/seo)                                                                  | [Metadata API and file conventions](https://nextjs.org/docs/app/getting-started/metadata-and-og-images)                                                          | [Route-module metadata](https://reactrouter.com/start/framework/route-module)                 |
| Image and font handling | Choose CSS, an image service, or an integration for your deployment                                                 | Built-in [`next/image`](https://nextjs.org/docs/app/api-reference/components/image) and [`next/font`](https://nextjs.org/docs/app/api-reference/components/font) | Choose CSS, an image service, or an integration for your deployment                           |
| Hosting                 | [Provider and runtime guides](./guide/hosting)                                                                      | [Self-hosting](https://nextjs.org/docs/app/guides/self-hosting) or a deployment provider                                                                         | [Deployment templates and hosting options](https://reactrouter.com/start/framework/deploying) |

Deployment support depends on the adapter, runtime, and features you use. Check streaming, image processing, filesystem access, background work, and shared-cache behavior on your chosen target. Next.js self-hosting includes image optimization and ISR configuration; those features should not be labeled Vercel-only.

## Performance Considerations

This page does not establish a performance winner. Startup time, HMR, memory use, JavaScript shipped, and response latency require separate measurements. Comparing a router package's bundle size with an entire framework is not a valid application benchmark.

For a useful comparison, build the same representative application with recommended patterns in each framework. Record package versions, hardware, dependencies, route count, rendering and caching settings, deployment target, warm and cold runs, and the raw results.

## When to Choose Each Framework

- **TanStack Start:** you want typed route context and URL state, explicit loaders and server functions, and control over per-route rendering.
- **Next.js:** you want its Server Component model and integrated image, font, metadata, and form facilities. Existing team experience and integrations can also make staying with Next.js the better choice.
- **React Router Framework Mode:** you want route loaders and actions, fetchers, and form-driven workflows. Read its [progressive enhancement guide](https://reactrouter.com/explanation/progressive-enhancement) if operation before JavaScript loads matters to your application.

Check Start's [overview](./overview) and [Server Components guide](./guide/server-components) for current release and experimental-feature status before adopting those features. To try Start, use [Getting Started](./getting-started) or [Migrate from Next.js](./migrate-from-next-js).
