用途:TanStack Start 是基于 TanStack Router、由 Vite 与 Nitro(通过 Vinxi)驱动的全栈 React 框架,提供 SSR、流式渲染、服务端函数、中间件与 API 路由,并可通过 Nitro 预设部署到任意平台。包名为 @tanstack/react-start,路由插件为 @tanstack/router-plugin,构建工具为 Vinxi,当前处于 RC 阶段,RSC 支持仍在开发中,将作为非破坏性的 v1.x 增补发布。
主要能力:服务端函数(createServerFn)提供客户端与服务端间的类型安全 RPC,GET 用于可缓存的数据获取,POST 用于变更与副作用,可配合 Zod 做 validator 校验。中间件(createMiddleware)可处理鉴权、日志等横切关注点,并通过 context 传递类型化数据,支持链式组合。API 路由通过 createAPIFileRoute 定义(如 /api/users 的 GET 与 POST)。SSR 默认采用流式渲染,可结合 defer() 与 Await 处理非关键数据以改善 TTFB。
使用方式:可用 npx @tanstack/cli create my-app 创建项目,或手动安装 @tanstack/react-start @tanstack/react-router react react-dom 及开发依赖 @tanstack/router-plugin typescript vite vite-tsconfig-paths。配置文件为 app.config.ts,通过 defineConfig 设置 vite 插件、server.preset 与 tsr 目录选项。项目目录包含 app/routes、client.tsx、router.tsx、ssr.tsx 和自动生成的路由树 routeTree.gen.ts。
适用场景与限制:适合需要 SSR、流式渲染与类型安全 RPC 的 React 全栈应用,可部署到 node-server、vercel、netlify、cloudflare-pages、aws-lambda、deno-server、bun 等预设环境。注意事项:服务端函数无法闭包客户端变量,因其被抽取到独立 bundle;返回值必须可序列化;loader 中忘记 await 会导致流式问题;在客户端 bundle 中导入仅服务端代码会引发构建错误;缺少 declare module '@tanstack/react-router' 会丢失类型安全。资料未提供收费、价格与具体效果数据。