# TanStack 启动基于 TanStack Router 构建的全栈 React 框架。通过 RPC、SSR/流、中间件组合实现类型安全的服务器功能，并部署到 Cloudflare Workers、Vercel、Netlify、AWS Lambda 等。 > **RC：** TanStack Start 目前处于候选版本状态。在稳定的 1.0 版本发布之前，API 可能仍会发生变化。 **包：** `@tanstack/react-start` ## 快速参考图案|用途 ---|--- `createServerFn()` | GET（默认）——幂等、可缓存的数据获取 `createServerFn({ 方法: 'POST' })` |改变数据的突变 `.inputValidator(zodSchema)` |处理程序之前输入验证 `.handler(async ({ data }) => {})` |具有类型化输入数据的服务器端逻辑 `getRequest()` |访问处理程序/中间件内完整传入的“Request” `getRequestHeader(名称)` |按名称读取单个请求标头 `setResponseHeaders（标头）` |设置传出响应标头（缓存、cookie） `useServerFn(fn)` |包装服务器函数以供具有挂起状态的组件使用 `createMiddleware().server(fn)` |请求中间件来解决横切问题 `.middleware([dep])` |编写具有依赖关系的中间件 `下一个（{上下文：{} }）` |通过中间件链向下游传递数据 `createMiddleware({ type: 'function' })` |具有输入验证功能的功能级中间件 `createStart()` 中的 `requestMiddleware`所有请求的全局中间件（SSR、fns、路由） `createStart()` 中的 `functionMiddleware` |仅用于服务器功能的全局中间件 `createIsomorphicFn()` |每个环境有不同的实现 `createServerOnlyFn()` |仅服务器实用程序 - 如果从客户端调用则崩溃 `createClientOnlyFn()` |仅限客户端的实用程序 - 如果从服务器调用则崩溃 `useSession()` |基于 Cookie 的会话，具有加密和安全设置 `session.update()` |更新会话数据 `session.clear()` |清除会话（注销） `加载前` |路由加载前进行身份验证检查 `_authenticated.tsx` |无路径布局路线，实现分组保护 `抛出重定向({ to: '/login' })` |带返回 URL 的重定向 `等待 EnsureQueryData()` |阻止关键数据上的 SSR `prefetchQuery()` |开始抓取，不阻塞SSR `<悬念>` 边界 |定义流数据块 `头：({ loaderData }) => ({})` |元标签、开放图谱、网站图标 `head.scripts` \+ JSON-LD | LLMO 的结构化数据 (schema.org) `llms.txt` 服务器路由 | AI系统指导文件 `标头：() => ({...})` |路由定义上的 ISR/缓存控制 `服务器：{处理程序：{ GET，POST } }` | `createFileRoute` 上的 API 路由 `ssr：假` |禁用特定路由的 SSR（SPA 模式） ## 执行边界功能|运行 |客户可以打电话吗？ |用于 ---|---|---|--- `createServerFn()` |服务器|是（RPC 存根）|数据获取、突变 `createServerOnlyFn()` |服务器|否（抛出）|秘密、数据库连接 `createClientOnlyFn()` |客户|不适用 |本地存储、DOM API `createIsomorphicFn()` |两者 |不适用 |每个环境的实现 ## 部署（Vite 插件）平台|插件 |运行时 ---|---|--- 云耀 | `@cloudflare/vite-plugin` |工人网络化| `@netlify/vite-plugin-tanstack-start` |节点韦尔塞尔 | `硝基/vite`（`预设：'vercel'`）|节点 Node.js/Docker | `硝基/vite` (`预设：'节点服务器'`) |节点 AWS Lambda | `硝基/vite`（`预设：'aws-lambda'`）|节点包子| `硝基/维特`（`预设：'bun'`）|包子静态| `硝基/vite`（`预设：'静态'`）|无 ## 常见错误错误|修复 ---|--- 服务器函数上没有 `.inputValidator()` |始终使用 Zod 模式进行验证原始获取而不是 `createServerFn` |失去类型安全、序列化和代码分割无边界混合服务器/客户端代码 |使用 `createServerOnlyFn` / `createClientOnlyFn` 检查每个处理程序中的身份验证 |使用中间件组合或“beforeLoad” 等待加载程序中的所有数据 |只等待关键数据，预取其余数据渲染中的“Date.now()” |从加载程序传递时间戳（水合不匹配）缺少 `nodejs_compat` 标志 | Cloudflare 的“wrangler.toml”中必需的获取突变 |使用 POST 进行创建/更新/删除 Cookie 未转发至外部 API |使用 `getRequestHeader()` 或 `createIsomorphicFn` 加载器中的“process.env”（在两者上运行）|包裹在`createServerFn`中——加载器也在客户端运行未经验证的服务器环境变量 |在 `.server.ts` 文件中使用 Zod 进行验证在 localStorage 中存储身份验证令牌 |通过 `useSession` 使用仅 HTTP 的 cookie 向客户端公开原始数据库错误 |捕获并返回用户友好的消息、日志详细信息内容页面没有结构化数据 |通过“head.scripts”添加 JSON-LD 以实现 AI 可发现性 ## 代表团将此技能用于 TanStack Start 服务器功能、中间件、SSR/流、路由保护、API 路由和部署配置。委托“tanstack-router”进行基于文件的路由、搜索参数和数据加载模式。委托“tanstack-query”进行缓存管理、乐观更新和查询模式。 > 如果“tanstack-form”技能可用，请将表单状态管理、验证和字段模式委托给它。如果“本地优先”技能可用，请将本地优先架构决策和同步引擎选择委托给它。如果“electricsql”技能可用，请委托 ElectricSQL 形状、身份验证配置并向其写入模式。如果“tanstack-db”技能可用，请将反应式集合、实时查询和乐观突变模式委托给它。＃＃参考 * [服务器功能]() — createServerFn、useServerFn、验证、身份验证、请求上下文、响应标头、文件上传、流式传输、TanStack 查询集成 * [中间件]() — 组合、功能级中间件、路由级中间件、全局中间件、日志记录、速率限制 * [SSR 和流媒体]() — 悬念、预渲染、ISR、缓存控制、混合策略、水合安全 * [路由保护]() — beforeLoad、无路径布局、会话安全、登录/注销、标头转发、更好的身份验证 * [API 路由]() — 服务器处理程序、REST 模式、路由级中间件、webhooks、运行状况检查、服务器功能与服务器路由 * [部署]() — Vite 插件、适配器比较、Cloudflare D1/KV/R2 绑定、Docker、预渲染 * [SEO 和 Head 管理]() — head 属性、元标签、Open Graph、Twitter 卡、favicons、SEO 助手 * [LLM 优化 (LLMO)]() — JSON-LD 结构化数据、schema.org、llms.txt、机器可读端点、AI 引用模式 * [错误处理]() — 区分联合、自定义错误类、状态代码、结果类型与 try-catch * [文件组织]() — 入口点、插件配置、执行边界、env 验证、.server.ts 约定 * [已知问题]() — 10 个已记录的问题及解决方法 * [查询集成]() — Router+Query 设置、SSR 集成、setupRouterSsrQueryIntegration、DevTools * [集成流程]() — 表单提交，包括缓存更新、无限滚动、分页表、受身份验证保护的路由、错误处理 * [本地优先集成]() — 塑造代理服务器功能、混合基于服务器和本地优先的数据、ElectricSQL 部署 * [Electric Middleware]() — 用于形状代理的身份验证中间件、全局中间件配置、sendContext、函数级验证

坦斯塔克开始

包含技能