When I'd pick Vite SPA vs Next

Both ship React. The question is how much framework you want between you and the browser.

I'd start with Vite + React when…

• It's clearly a dashboard / authenticated app behind a login
• SEO is mostly irrelevant
• You want to choose Router / Query / deploy target yourself
• The team already thinks in SPA terms (and likes that)
• You don't want to debug server/client boundaries on day one

This is the closest thing to a classic Vue 3 + Vite + Vue Router app. Comfortable. Predictable.

I'd start with Next when…

• Marketing pages + app in one repo
• You care about first paint / SEO / OG images without bolting on a separate site
• Server-side data access (DB, secrets) should stay off the client by default
• You want file-based routing + deployments that assume a Node/serverless target
• The org already standardized on Vercel/Next (politics are real 😅)

Closest cousin: Nuxt. If you liked Nuxt's "batteries included" feel, Next will feel less alien than a bare SPA.

Hybrid realities

Plenty of teams:

• Use Next for the public site + auth entry
• Or use a Vite SPA with a separate Astro/Nuxt/Next marketing site
• Or put TanStack Query in client islands inside Next anyway

I've done all three. Dogma loses to constraints.

A simple decision sketch

Need SSR/SEO/server secrets as a default?
|-- yes → lean Next (or Nuxt if staying on Vue)
|-- no  → Vite SPA is fine

Need rich client interactivity everywhere?
|-- yes → SPA, or Next with many client islands (be honest about cost)
|-- no  → RSC-heavy Next can stay thin on the client

Closing the Next section

If you came from Vue:

1. Learn React SPA mental model first (hooks, props, effects)
2. Add Router + Query + a small store
3. Then learn where 'use client' belongs in Next

Skipping straight to RSC while still fuzzy on re-renders is how you get angry at the framework instead of your boundaries.

Cheatsheet next - dense tables for when you forget the name of the thing.

Until next time folks!