SuperAPI AI 工具集

tanstack-start

前端与建站

查看项目

更新于 10-15 22:33

技能介绍

用途:TanStack Start 是构建在 TanStack Router 之上的全栈 React 框架(RC 阶段),适合需要按路由切换 SSR/CSR/SSG 的新项目、从 Next.js 或 React Router 迁移并保留文件式路由与 API 路由、以及部署到 Cloudflare Workers 等边缘运行时的场景。

主要能力:文件式路由(app/routes/** 自动生成路由树、代码分割与数据预加载);按路由设置 ssr: true | false | 'data-only',默认由 defaultSsr 控制;server functions 与类型安全参数/搜索参数(createFileRoute 推断路径参数,validateSearch 配合 zod 解析);loader 每次位置变化运行一次,可用 redirect()/notFound() 控制流程;可与 TanStack Query 桥接(router context 中创建 QueryClient,loader 内 ensureQueryData 去重);Link 预加载(preload="intent"/"render")、路由遮罩、导航拦截、滚动恢复;开发期 RouterDevtools 与 @tanstack/eslint-plugin-router。

使用方式:npm create @tanstack/start@latest my-app,然后 cd my-app、npm run dev。手动安装需加入 @tanstack/react-router 与 @tanstack/react-start 及对应打包插件(vite、webpack 或 esbuild)。Cloudflare 场景可用 scripts/bootstrap-cloudflare-start.sh <app> 脚手架,Vite 插件中 cloudflare({ viteEnvironment: { name: 'ssr' } }) 需置于首位,改动后运行 npm run cf-typegen 重新生成绑定类型。

限制:资料未提供收费、价格与具体性能数据;hydration、API 路由、绑定、导航/预加载失败等问题需参考其 troubleshooting 文档。