Podcast Summary: Software Engineering Daily Episode on TanStack and the Future of Frontend with Tanner Linsley

Introduction In the June 12, 2025 episode of Software Engineering Daily, host Nick Nisi engages with Tanner Linsley, the creator of TanStack, an open-source collection of high-performance libraries tailored for JavaScript and TypeScript applications. The discussion delves deep into the evolution of TanStack, its various components, the emphasis on type safety, the introduction of TanStack Start—a full-stack framework—and the future prospects of frontend development.

Background of Tanner Linsley Tanner Linsley has been a pivotal figure in the frontend development community, dedicating the past year exclusively to developing and maintaining TanStack. Prior to this, Tanner co-founded Nozzle, a startup where he tackled complex frontend challenges for a decade. His journey into JavaScript began with AngularJS and WordPress, eventually leading him to focus entirely on open-source contributions.

[01:19] Tanner Linsley: "I make software, primarily open source software now as of about almost, almost a year ago. It marks when I went full time on Tanstack, so it's going really well."

Evolution of TanStack Originally, TanStack began with libraries like React Table (now TanStack Table) and React Query (now TanStack Query). These libraries were designed to address specific needs in state management, data fetching, and table utilities, emphasizing declarative APIs and optimized performance.

• React Table to TanStack Table: Tanner developed React Table during his time at Nozzle to solve intricate table-related problems. Over time, it evolved into TanStack Table, retaining its core functionalities while expanding its ecosystem.

• React Query to TanStack Query: Similarly, React Query was among the first projects under the TanStack umbrella, gaining widespread adoption for its robust data fetching capabilities.

[02:48] Tanner Linsley: "No, the first project actually was Tanstack Table. Back then it was called React table. That was one of the very first ones that I wrote that is still around today."

Introduction of TanStack Start TanStack Start is a significant milestone, representing a full-stack framework comparable to Next.js and Remix. It integrates server-side rendering (SSR), hydration, and single-page application (SPA) functionalities using TanStack Router.

• Framework Capabilities: TanStack Start adopts a server-first mentality, ensuring that both server and client-side rendering are seamless. It leverages TanStack Router extensively, simplifying the developer experience by abstracting complex server interactions.

[05:53] Tanner Linsley: "It's a Full Stack framework, which just means it has a server first. I mean it has a server first technical mentality to it."

• Isomorphic Rendering: Unlike some frameworks that differentiate strictly between server and client components, TanStack Start treats components as isomorphic, rendering them on both the server and client unless specified otherwise.

[07:05] Tanner Linsley: "It's isomorphic. So by default, and this is how Remix is too Remix, we're rendering everything on the client. We're also rendering that on the server during ssr."

Emphasis on Type Safety A cornerstone of TanStack's philosophy is type safety. Tanner elaborates on how TanStack Router achieves comprehensive type safety without burdening developers with excessive TypeScript configurations.

• Type Inference: TanStack Router infers types automatically, eliminating the need for manual type annotations or generics in route definitions.

[18:43] Tanner Linsley: "you can just write with Tanstack Router and never need to cast anything or write type code at all or annotations. You never, yeah, you know, you never have to like narrow manually."

• Comparison with Other Routers: Contrasting with frameworks like Next.js and React Router, which require explicit type definitions, TanStack Router's architecture inherently enforces type safety, reducing the likelihood of runtime errors.

[20:22] Tanner Linsley: "From the minute that you define your router and your routes and start going down into, you know, components and loaders and things like that, search parameters, everything is fully inferred."

Server Functions and Middleware TanStack Start introduces advanced server functions that enhance backend interactions while maintaining type safety.

• Creating Server Functions: Developers can define server functions using createServerFunction, allowing customization of HTTP methods, middleware integration, and payload validation.

[09:38] Tanner Linsley: "we created a primitive for Tanstack Start called createserver function. And if you've ever used trpc, it probably will feel a lot like creating a TRPC procedure or mutation or query."

• Middleware and Observability: Middleware functions can manipulate request payloads, add observability features, and handle authentication seamlessly.

[12:15] Tanner Linsley: "we helped Century create a middleware for server functions that does full observability from client to server and back to client again."

Expansion to Multiple Frameworks TanStack is not confined to React; it has expanded to support other frameworks like Solid, enhancing its versatility.

• TanStack Solid Router: Recently announced, TanStack Solid Router integrates seamlessly with Solid.js, demonstrating TanStack's commitment to cross-framework compatibility.

[28:40] Tanner Linsley: "we officially announced Tanstack Solid Router. So it's that's already out fully tested, passes all the tests, got the sign of approval from, you know, a lot of the Solid team."

• Framework-Agnostic Plugins: The introduction of plugins like Tanstack Directive Functions allows customization beyond React, supporting functionalities like WebSockets and other directives.

[31:21] Tanner Linsley: "we have a directive plugin, not a Use server plugin. So you can actually support other function directives if you want to extract them out."

Development Practices and Tooling To streamline the development process, TanStack offers tools that simplify project setup and configuration.

• Create TS Router App: A novel tool that serves as a drop-in replacement for Create React App (CRA), pre-configured with TanStack Router and supporting multiple frameworks and integrations.

[35:41] Tanner Linsley: "it is a drop in replacement for, oh, I was going to use cra, I'm going to use. I'm Going to use, you know, cta."

• Vite Integration: Embracing Vite for its modern tooling capabilities, TanStack ensures that developers can easily customize their build configurations without being locked into monolithic setups like CRA's webpack configuration.

[38:11] Tanner Linsley: "we use Vinci as like the as like a little runner. So you say like Vinci Start, Vinci Build, or whatever."

Artificial Intelligence in Development Tanner shares his perspective on the role of AI in software development, highlighting both its benefits and limitations.

• Daily Use of AI Tools: Tanner relies heavily on tools like ChatGPT and Cursor to enhance productivity, streamline code generation, and facilitate learning new APIs.

[40:41] Tanner Linsley: "I use Google all the time to like search for a site that I need, that I need to go somewhere, you know, so it's, it's become more like AOL keywords or something."

• AI as an Assistant: Rather than replacing developers, AI serves as an aid to speed up the coding process and assist in understanding complex concepts.

[44:26] Nick Nisi: "Like we’re no longer really in the world where we’re staring at a blank, a blank file and like figuring out how to get started."

• Challenges with AI Adoption: New frameworks like TanStack Start face challenges as AI models may not yet be trained on them, necessitating robust documentation and community-driven examples to bridge the knowledge gap.

[46:18] Tanner Linsley: "we have to make sure our documentation is outstanding. Plenty of examples. Get more and more people writing projects with it that are open source and public."

Future Plans and Innovations Looking ahead, TanStack is poised to introduce several advancements aimed at enhancing flexibility and performance.

• Migration to Nitro and Vite: TanStack plans to phase out Vinci in favor of directly leveraging Nitro and Vite, supporting over 30 deployment destinations with minimal code changes.

[28:40] Tanner Linsley: "we're going to have support for deploying to over 30 deployment destinations right out of the gate."

• Server Components and Enhanced SSG: Future updates will include server components and improved static site generation (SSG) features, allowing for pre-rendered HTML with dynamic content placeholders.

[52:00] Tanner Linsley: "And then obviously this will probably be after we do 1.0, but we will bring server components to Tanstack Start very soon."

• Community and Open Source Collaboration: Continuous collaboration with framework teams like Solid.js ensures that TanStack remains adaptable and integrated with evolving frontend technologies.

[54:26] Tanner Linsley: "Solid Start is actually already using a lot of the new plugins that we built for things like Server functions."

Conclusion The episode offers an insightful exploration into TanStack's journey and its significant contributions to the frontend ecosystem. Tanner Linsley's dedication to enhancing developer experience through type safety, framework versatility, and robust tooling underscores TanStack's pivotal role in shaping the future of frontend development. As AI continues to integrate into development workflows, TanStack remains committed to empowering developers with the tools and frameworks necessary to build high-performance, scalable applications.

Key Takeaways:

• Type Safety: TanStack Router provides comprehensive type safety through advanced TypeScript inference, reducing the need for manual type annotations.
• Framework Agnosticism: Expanding beyond React, TanStack supports multiple frameworks like Solid.js, ensuring versatility and wide applicability.
• Developer Tools: Tools like Create TS Router App streamline project setup, integrating seamlessly with modern tooling like Vite.
• AI Integration: AI serves as an assistant in the development process, enhancing productivity and learning, while the community-driven adoption ensures new frameworks are supported over time.
• Future Innovations: Continued advancements in server functions, SSG, and deployment flexibility position TanStack as a leader in frontend development tools.

For more insights and updates, listeners are encouraged to follow Tanner Linsley on Twitter (@tannerlinsley) and join the TanStack Discord community.