SPA vs MPA — frontend bundle

The one idea

TanStack Router is SPA-only by itself. With TanStack Start it server-renders each route for MPA-grade SEO & first paint BUT keeps SPA-grade transitions — you get both.

A classic MPA reloads the whole document on every navigation (great SEO/first paint, disruptive). A classic SPA loads one shell then routes on the client (app-like, poor SEO by default). TanStack spans the axis: flip on spa: { enabled: true } for a no-server SPA, or run the default and the server renders each route — then the client takes over for instant, reload-free navigation. Pure SPA when you have no server; Start when you want the server-render benefits.

no server → SPA mode SEO + server → Start SSR content site → use Astro instead

The three navigation models — click navigate

Hit navigate in each browser and watch what happens to the document. The MPA reloads the whole page every time. The SPA never reloads — it swaps the view on the client. TanStack Start server-rendered the first document, then the client takes over — subsequent navigation is reload-free, app-like.

Decision helper — SPA mode, Start SSR, or Astro?

Deterministic: the same three answers always return the same pick. Try the app + needs SEO + has a server path → it returns TanStack Start (SSR); flip has a server to no → it returns SPA mode. Both are asserted by the gold-check.

1. Is it an app (interactive) or content (read-heavy)? 2. Need SEO / a crawlable, fast first paint? 3. Have / want a server runtime (Node or edge)?

Pick answers above, then hit which fits?.

Three-way comparison — model × dimensions

The TanStack column is dual on purpose: it spans the axis. SSR = the default server-rendered mode; SPA-mode = spa: { enabled: true }, static shell, no server.

The axis this bundle draws is navigation model: full reload (MPA) ↔ no reload (SPA). TanStack Start SSR = server-render first paint + client takeover (both). TanStack SPA mode = pure SPA. Cross-refs: 🔗 ssr_streaming (render → flush → hydrate) · 🔗 tanstack_start_overview (the stack) · 🔗 metaframework_landscape (broader framework choice). Astro's static-vs-server is the same axis — see the astro/ phase.