Is TanStack Start better than Next.js?

Highlights

• TanStack Start offers better TypeScript support and type safety compared to Next.js, especially with its file-based routing system

• Next.js has superior AI readiness, ecosystem, and learning resources due to its maturity and widespread adoption

• Developer experience with TanStack Start is smoother with faster dev servers (Vite-based) and more predictable behavior, avoiding Next.js caching complexities

• Next.js uses React Server Components while TanStack Start uses a loader pattern with server functions, offering different approaches to server-side rendering

• Caching in Next.js is aggressive but complex and potentially problematic, while TanStack Start has simpler, more consistent defaults

• Next.js includes more batteries-included features like optimized image components and internationalization support

• Both frameworks are production-ready, though TanStack Start is still in release candidate phase and deployment documentation needs improvement

Timeline

1. 00:00 - 01:47

   Introduction and Comparison Framework

   The video compares TanStack Start and Next.js based on a livestream where the creator built the same app twice with both frameworks. TanStack Start is explained as TanStack Router plus server-side capabilities, making it a full-stack React framework like Next.js. The creator emphasizes this is a subjective comparison based on personal experience building applications with both frameworks. An important distinction is made that developers should only use full-stack frameworks like these when they need server-side rendering and logic, otherwise a simple Vite + React Router setup is more appropriate.

2. 01:47 - 05:06

   AI Readiness and Ecosystem

   Next.js has significantly better AI readiness because chatbots have more training data on it, while TanStack Start is still in release candidate phase and AI tools often have outdated or incorrect information about it. The ecosystem comparison heavily favors Next.js due to its longer existence, more tutorials, courses, and YouTube videos available. Next.js is part of the default AI-suggested stack (Next.js, React, Tailwind, TypeScript) while TanStack Start will likely never become a default choice. Download statistics show Next.js has substantially more usage, though TanStack Start shows a positive upward trend in adoption.

3. 05:06 - 08:36

   Learning Curve and Documentation

   Both frameworks receive a 2+ rating for ease of learning but for different reasons. Next.js has excellent getting started documentation and straightforward initial concepts like page.tsx files and dynamic segments, but becomes complex with advanced features especially caching which can be confusing due to aggressive multi-layer caching strategies. TanStack Start has a harder initial learning curve with documentation that feels like a 'brain dump' and lacks clear articles on key topics like data fetching, requiring developers to reference both TanStack Start and TanStack Router documentation. However, once past the initial barrier, TanStack Start becomes easier to work with for advanced features and avoids the hidden footguns present in Next.js caching.

4. 08:36 - 10:00

   Developer Experience

   TanStack Start receives 3+ for developer experience compared to Next.js's lower rating due to several factors. Next.js suffers from caching-related issues where development and production modes behave differently, forcing constant production testing which slows development. The dev server can be slow with webpack, though the new Turbopack version improves this significantly but still doesn't match TanStack Start's Vite-based setup. TanStack Start offers a faster, more predictable experience with minimal weird behaviors, though some quirks exist since it's still in release candidate phase. The creator clearly prefers working with TanStack Start from a developer experience perspective.

5. 10:00 - 11:23

   Routing and TypeScript Support

   Both frameworks use file-based routing with different naming conventions that are similarly easy to learn, with Next.js offering features like parallel routes that can be quirky to set up. The key differentiator is that TanStack Start provides 100% type safety with its file-based routing system, which Next.js lacks. TypeScript support is very good in Next.js but even better in TanStack Start, particularly when working with server actions, server functions, and data fetching. For developers who use TypeScript (which the creator strongly recommends), TanStack Start provides a more enjoyable and type-safe development experience.

6. 11:23 - 13:07

   Data Fetching Approaches

   Next.js primarily uses React Server Components (RSC) where page components are only rendered server-side by default, allowing direct database access code in components without client-side exposure. TanStack Start takes a different approach where route components render on both server and client sides, using a loader pattern similar to Remix with server functions created using 'createServerFunction' wrapper. These server functions are marked to run only on the server but can be called from client-side code, with HTTP requests sent behind the scenes. Both frameworks also support alternative approaches like API endpoints with useEffect and Fetch API, or TanStack Query integration.

7. 13:07 - 14:24

   Data Mutations and Server Functions

   Next.js handles mutations through server actions decorated with the 'useServer' directive, which the creator isn't a big fan of along with 'useClient' directives. When a file is decorated with 'useServer', all functions become server-only but can still be called from client-side using hooks like useActionState. TanStack Start continues using the createServerFunction approach for both data fetching and mutations, wrapping server functions with the useServerFunction hook in client-rendered components. This provides features like automatic redirect handling while ensuring code only runs on the server. The fundamental concept is similar between both frameworks despite different implementation approaches.

8. 14:24 - 16:32

   Caching Complexity

   Caching is identified as one of the most difficult and problematic aspects of Next.js, with aggressive defaults across multiple layers that can be complex to understand and configure properly. The creator mentions covering this topic in detail in their Next.js course for learning from beginner to advanced level. While aggressive caching can provide good performance for users, it's easy to make mistakes and shoot yourself in the foot. TanStack Start offers simpler, less aggressive caching with good defaults that remain consistent between development and production modes. It provides sensible caching for navigation (preventing excessive server requests during rapid navigation) but doesn't attempt to cache everything on multiple layers, making developer life easier though requiring more manual optimization for best performance.

9. 16:32 - 18:02

   Stability and Production Readiness

   Both frameworks receive 2+ for stability with important caveats. Next.js is more mature and powers thousands of production applications successfully, though it has experienced bugs especially with the development server crashing over the past couple years, which has improved significantly. Recent React security vulnerabilities are noted but aren't primarily Next.js problems and could affect TanStack Start in the future when it supports RSC. TanStack Start is still in release candidate phase and the creator has encountered crashes, weird error messages, and strange behaviors, which could justify only 1+ rating. However, given its RC status, it's quite stable, with the creator successfully running production applications like buildmygraphic.com powered by TanStack Start without issues.

10. 18:02 - 20:34

    Built-in Features and Deployment

    Next.js clearly wins on batteries-included features with built-in optimized image components and internationalization support that TanStack Start lacks and may not plan to add. Third-party alternatives exist for TanStack Start, and these features may not be important for all developers. For deployment, Next.js built by Vercel is easiest when deployed on Vercel (3+), while historically difficult for self-hosting, though recent improvements in documentation make deployment on other services much easier (2+). TanStack Start receives 2+ for deployment with good support for partners like Cloudflare and Netlify, but VPS deployment with Bun or Node has challenging documentation with gaps in best practices and potential pitfalls. The creator suggests this could improve to 3+ with better deployment guides.

11. 20:34 - 20:46

    Conclusion and Community Engagement

    The creator emphasizes that all comparisons are subjective based on personal experience and thoughts rather than objective truth. They invite viewers to share their own experiences and perspectives in the comments, specifically asking about whether viewers have made the switch between frameworks, their thoughts on Next.js and TanStack Start, if they're considering switching, or if they use alternative frameworks entirely. This acknowledges the comparison represents one developer's perspective and encourages community discussion to provide multiple viewpoints on the topic.