You guys wanted it, so here we go!

Nextjs v/s TanStack🧵

1/n

What Next.js Does Well ?
 
1. Easy setup: Out-of-the-box (OOTB) integrations for tools like MUI, Markdoc, and Datadog.

2. High-scale optimization: Advanced APIs like SSR, ISR, edge functions, and caching make it ideal for large-scale apps.

3. Great for e-commerce or apps needing micro-optimizations.

2/n

Debugging Issues

Next.js’s heavy abstraction makes debugging a nightmare. With 3 separate caches (Full Route Cache, Data Cache, Router Cache), tracing issues is far from straightforward. 

Simpler setups like Vite don’t have this problem.

4/n

SPAs Are an Afterthought

Next.js heavily promotes server-side APIs over client-side rendering (CSR). 

SPA support feels secondary and lacks robust documentation compared to alternatives like TanStack.

5/n

Performance Problems

Even with Turbopack, dev server compilation times were slow compared to Vite. 

Vite compiles in milliseconds and feels lightweight without sacrificing functionality.

6/n

Why TanStack + Vite?

Simplicity: Auto-complete routing with TanStack Router and validated search params via Zod.

Speed: Vite is blazing fast and gets out of the way.

Transparency: APIs are intuitive and easy to debug without vendor lock-in.

7/n

Example with TanStack Router

Simple, typesafe, and elegant!

8/n

Global State Management with TanStack Query

Fetching data is straightforward with built-in dev tools for debugging. Example:

9/n

Final Thoughts

Next.js is great if you need hyperscale optimizations or love its ecosystem. 

But for most projects, TanStack + Vite offers a cleaner, faster, and more cost-effective alternative. 

I’m done with Next.js—for now. 🚀

Special thanks to Kyle Gill for the blog on Nextjs v/s Tanstack

Checkout the original blog here: https://kylegill.com/essays/next-vs-tanstack/

10/n

The Downsides of Next.js

1. Overkill for smaller apps: Many APIs (e.g., ISR) are unnecessary for startups or mid-sized teams.

2. Financial incentives: Many features tie you to @vercel's services, making switching costly.

3. Complexity: The app router introduces difficult concepts unrelated to 
ReactJS.

3/n