#TanStack

Introducing TanStack Redact 🌴 A smaller runtime for your existing React app. Add it to your build config and ship less JavaScript without changing a single line of application code. Works with TanStack Start, Vite, Vinext, and Next.js.

TanStack DB 1.0 RC1 is out! Backend data that feels local: typed collections, live queries, and edits that show up instantly, then sync. Start with your REST API. Add persistence, offline writes, and real-time sync later. Your queries stay the same.

I work with TanStack Start daily Anyone else building with it? Let's connect! 👋

in tanstack start, beforeload runs before the page loads, even before the loader function that fetches data for the ui before the ui renders so use the beforeload function to check the user session and whether they are logged in. if not, you can redirect them directly from here, without rendering the page this prevents a ui glitch where the private ui/page appears first and then redirects to another page, like the login page #tanstack #tanstackstart #react #webdev #JavaScript

This! I always liked #ReactQuery. I believe it makes managing server-side state so easier. "A note on separation of concerns" part of this article explains very well what I always think. #TanStack #React #JavaScript #FrontEndDevelopment

Stop shipping AI features. Start building AI interfaces ⚡ @codingthirty, Developer Advocate at @strapijs, will show how to build AI-ready interfaces with React, TanStack AI and MCP. Build what's next with us in New York or online, Nov 17 & 20:

you can leak credentials if you dont properly understand loaders in tanstack start here is something you need to know: a route loader does not always run on the server - on page refresh, it runs on the server - during client-side navigation, it can run in the browser this means you should never put direct database calls inside a route loader if the loader runs in the browser, you can expose database credentials and secret keys so, what should you do? use createServerFn() for database queries and other backend operations it ensures that your backend code runs on the server remember: a loader does not always run on the server. always know where your code runs. #tanstackstart #reactjs #typescript #javascript #websecurity

api route vs server function in tanStack start most people pick one and never ask why both talk to your backend. both return data. but they solve different problems. api route: → a real file at routes/api/hello.ts → you call it with fetch("/api/hello") → it's a public url anything can hit e.g mobile apps, external services etc. server function: → no file path. no endpoint. → you import it and call it like a normal function → it always runs on the server, never in the ui interesting part: i never wrote an endpoint for the server function tanstack start creates the request in the background. I just call getServerTime() and the data shows up same response as the api route So the rule is simple: building for a mobile app, another service, or a webhook? → API route only your own tanstack start app consumes it? → server function. skip the endpoint file entirely Stop creating a route just to call your own code which one do you default to? #TanStack #TanStackStart #TypeScript #React #webdev

if TanStack Start app page uses browser-only code like "window" or "localStorage" etc., server side rendering can fail to stop that, set `ssr: false` in `createFileRoute` then the page will not render on the server it will render on the client #tanstack #fullstackdeveloper

Another write-up on #TanStack Start, this time I wanted to implement a simple blog. Write in Markdown, server-only rendering, CSP-compatible syntax highlighting, Server Functions, and loader data.

moved our internal admin dashboard from next.js to tanstack start, now on prod. took ~3 days, numbers: client js: 2.63mb → 1.14mb server bundle: 62.4mb → 9.8mb prod build: 64s → 22s req/s on a heavy page: 92 → 825 (9x), p95 199ms → 25ms memory peak: 568mb → 281mb dev load: 20s → 5.8s and the dx is really good!

If you were starting frontend development today, which stack would you choose? (A) React + TypeScript (B) Next.js + Tailwind CSS (C) Vue + Nuxt (D) Svelte + SvelteKit

@mayuri_3015 tanstack start+shadcn/ui

Hey @tannerlinsley, quick question: Is TanStack Start ready for a production medical dashboard/appointment system? 🏥 ​We plan to self-host it on a standard Linux VPS (Hostinger) rather than a serverless edge environment. Any major gotchas with that setup right now? #TanStack

How we got to 1.0: 211 oracle test files across 15 packages. Each oracle is a small, independent model of how part of DB should behave. Generated histories run through both, and any mismatch is a bug or a design question. 420K lines of new tests later, the API is stable.

Try the RC in your most demanding app and tell us how it goes. Get started: Upgrading: Release post:

Use the pendingComponent option in TanStack Start loaders to display a skeleton UI while data loads from the backend thanks to @ImLunaHey, @zxcodes. they gave this idea #TanStack #React #WebDev #TypeScript #Frontend

Is it #TanStack or Tan's Stack? 🤘

If I were to start a full stack app today, I would most likely use Remix.

Been diving deep into TanStack Start lately and decided to write an article about it. Took the chance also to revamp my blog to astro 5 & give it a fresh look! 💅 @tan_stack #tanstack #react Blog post in reply, let me know

Build time went from 2m 23s to 38s 🤯 Migrated the website from Next.js to TanStack Start. That's almost 4x faster on every single deploy. Didn't expect it to be this big, tbh.

作为一个一直只写 Next.js 的人，我为什么也开始被 TanStack Start 圈粉了？ 老实讲，在这之前我一直是个纯正的 Next.js 肌肉记忆患者。 每次开新项目，不管是做学习平台 LearnX 还是写各种小工具，我的第一反应永远是无脑跑 create-next-app。对于最近半年在外网独立开发者圈子里火得一塌糊涂的 TanStack Start，我之前其实一直没真正上手用过，心里甚至觉得：「Next.js 生态这么稳，干嘛还要去折腾一个新框架？」 直到最近我在打磨自己的全栈底座 Supastack 时，发现身边越来越多硬核开发者（尤其是重度使用 Cursor 和 Claude Code 的朋友）都在念叨 TanStack。出于好奇，我们专门去深扒了一下它的架构逻辑，甚至直接把 TanStack Start 作为第二套 Web 引擎（apps/web-tanstack）完整接进了我们的底座仓库里。 看完这套用 TanStack 搭出来的代码结构后，我终于明白为什么那么多老程序员对它上头了。如果用最直白的话总结它的好，核心就三点： 1. 没有「黑盒魔法」，它对 AI 写代码太友好了我们平时用 Next.js App Router 配合 AI 写代码时，最头疼的往往不是写业务逻辑，而是跟框架的「隐式规则」打架： 这个文件到底在服务端跑还是客户端跑？为什么加了一行代码就报 Hydration 水合错误？为什么数据库明明改了，页面却被某层看不见的缓存卡住了？哪怕你给 AI 写了一大堆 Prompt 规则，它还是经常在 'use client' 和 Server Actions 的边界上发疯。 而 TanStack Start 的设计哲学刚好反过来：极致的显式（Explicit）。 它不搞那些靠隐式指令和暗箱缓存自动触发的黑魔法，哪怕同样是文件路由，每个路由也都是通过 createFileRoute 显式声明，所有边界和逻辑都是清清楚楚的 TypeScript 函数： 路由加载前要验权或拉数据？直接写在明面上的 beforeLoad 和 loader 里； 要调服务端接口读写数据？直接用 createServerFn 定义，配合 .validator() 校验，输入输出全带严格类型。 这种设计在 AI 时代有一个巨大的红利：因为没有任何隐藏在框架背后的潜规则，AI 读代码上下文的时候一眼就能看懂数据是怎么流的，写出来的代码准确率高得离谱，几乎不会出现精神分裂式的幻觉。 2. 把路由和 URL 参数做成了 100% 的「类型安全」以前写复杂的后台页面，最容易出低级 Bug 的地方就是改路由名字和传 URL 参数（比如 ?page=2&filter=paid）。很多时候你改了一个页面的路径，或者改了一个参数名，编译器根本不会报错，只有等用户点进去变成了 404 或者页面崩了你才知道。 TanStack Router 最绝的地方，就是把 端到端类型安全（End-to-End Type Safety） 塞进了每一个链接里。 不管是自动生成的路由树路径、动态参数，还是通过 validateSearch 声明的 URL 查询条件，全都是强类型的。只要你改了一个路由结构或参数定义，不用打开浏览器点测试，编辑器里的 tsc 会在一秒钟内把全站所有没对齐的跳转链接全部标红。对强迫症和独立开发者来说，这种安全感真的很难拒绝。 3. 轻快、纯粹，不绑架你的底层业务除了底层基于 Vite 带来的毫秒级热更新速度之外，这次把 TanStack Start 塞进 Supastack 的过程，也让我彻底跑通了一个很爽的架构思路： 其实我们根本不需要在 Next.js 和 TanStack 之间痛苦地二选一。 在设计 Supastack 的时候，我们把 90% 最耗时、最容易踩坑的核心商业基建——包括 Drizzle 数据库 Schema、鉴权逻辑、Stripe/Creem/Polar 等 8 家出海支付的幂等账本、AI 路由、邮件系统、20 多套主题以及跨框架复用的页面核心（web-core）——全部抽离到了底层的共享 packages/* 里。 在这个共享底座之上，我们同时配好了 apps/web 和 apps/web-tanstack 两套现成的 Web 引擎： 如果你像以前的我一样习惯了 Next.js 16，或者强依赖它的生态，直接开箱就用； 如果你想尝试 TanStack Start 极致的类型安全和干净的显式代码，不用自己从头配环境、不用重新写一遍登录和支付，直接切过去就能跑同一套完整的商业闭环（甚至还能同步复用仓库里的 Expo 移动端和 Tauri 桌面端）。 如果你之前也像我一样只听说过 TanStack 的大名、还没来得及自己配环境试水，或者想看看同一套全栈业务在 Next.js 和 TanStack 下分别长什么样，可以直接去我们的文档和在线演示里看现成的实现： 👉 双引擎全栈底座与架构文档：

版本答案就是： Next.js 16 + Expo + Tauri + PostgreSQL + Drizzle ORM + Supabase RLS + S3/R2 + AI Router + + Resend + Stripe + Creem + Polar + Dodo + RevenueCat + Turborepo + pnpm 这一套可以直接出海赚刀乐了。对于小白来说可能有点复杂，但是有了 AI 就不难了。 我基于这套技术栈搞了一套生产力套件，有了想法，可以基于这一套快速搭建全栈软件（我自己上周刚用它 2 天上线了一个微软商店桌面工具）：

Imagine I'm going to release a new premium front-end library for the #TanStack. It could be original or based on my previous work. What would you wish for it to be? How much would you expect it to cost? #React #javascript