React Web Advanced 是一个针对 React Web 应用的技能，建立在 TanStack Router、TanStack Start 与 TanStack Virtual 技术栈之上。文档说明该技能扩展自 react-advanced（跨平台核心模式），后者覆盖 React Query、XState、Zustand、Zod、TanStack Form 和 TanStack Table 的约定，使用本技能前应先阅读基础技能。
用途与定位
该技能面向需要处理路由、SSR 与大数据量列表的 React Web 项目，在共享核心之上增加三层架构：TanStack Router 负责路由与 URL 状态（类型安全导航、搜索参数、路由加载器）；TanStack Start 负责全栈边界（服务器函数 createServerFn、SSR、流式渲染）；TanStack Virtual 负责 1000+ 项的大列表虚拟化渲染。
核心原则
文档提出“金科玉律”：以 queryOptions 作为唯一数据源，定义一次后可在加载器、组件和缓存失效处到处导入。路由器通过 context 接收 QueryClient 作为唯一集成点。文档特别说明 defaultPreloadStaleTime: 0 是有意设置，否则路由器会独立缓存加载器结果，导致预加载期间 React Query 的 staleTime 被忽略。
路由加载器与数据获取
技能给出路由加载器配合 React Query 的模式：阻塞式数据用 ensureQueryData，非阻塞数据用 prefetchQuery。使用 Promise.all 并行预取相互独立的数据以避免请求瀑布，非关键数据用 fire-and-forget 方式预取。文档强调不应在 useEffect 中获取本可放入路由加载器的数据，父子路由加载器默认并发执行。
性能模式
在 React Compiler（React 19+）下，文档建议不要手动用 React.memo 包装组件，也不要为性能手动使用 useMemo/useCallback，而应编写符合 React 惯用法的代码并遵守 Rules of React；手动 useMemo/useCallback 仅在控制 effect 依赖时仍有价值。Suspense 边界方面，路由级可用 pendingComponent/errorComponent，路由内将非阻塞数据单独包裹 Suspense，相互依赖的查询归入同一 Suspense 以便一起解析。代码分割方面，路由可用 .lazy() 或 .lazy.tsx 拆分，关键配置保留在主文件，组件/UI 移入懒加载文件；重型按需组件（富编辑器、图表）用 React.lazy。
文件组织
文档列出了推荐目录结构，包括 routes（含 __root.tsx、路径分组 (auth)/(app)、以 - 前缀排除出路由树的组件目录）、queries、mutations、machines、stores、serverFns、components/ui、components/shared、lib（query-client.ts、router.ts）、test（setup.ts、test-utils.tsx、mocks/handlers.ts）。约定包括：路由专属组件放在 - 前缀目录、无路径分组用 (name) 组织且不影响 URL、.lazy.tsx 只导出组件相关项、测试文件与源码同目录放置。
常见陷阱
文档列举了多个易错点：createFileRoute 中属性顺序必须为 validateSearch -> loaderDeps -> beforeLoad -> loader，并建议安装 @tanstack/eslint-plugin-router 的 create-route-property-order 规则；loaderDeps 不应返回整个搜索参数；preload="intent" 需配合 React Query 缓存；未注册路由器会导致类型全为 any；<Await> 需要 <Suspense> 祖先；defaultPreloadStaleTime 未设为 0 会导致预加载提供过期数据；notFoundComponent 中不能用 useLoaderData；建议先端到端实现并验证认证流程再构建功能页面；intent 预加载会在悬停时触发 beforeLoad 认证检查；无过滤的 invalidateQueries() 会级联影响认证钩子；认证 nanostores 可能造成无限重渲染；beforeLoad 在客户端每次导航时重跑会带来服务器往返。
参考文件
文档列出按场景阅读的参考文件：references/router.md（路由、搜索参数、加载器、代码分割、导航）、references/start.md（服务器函数、SSR、中间件、部署）、references/virtual.md（虚拟化、动态高度、无限滚动、网格）、references/integration.md（Router+Query 接线、认证守卫、查询键命名空间、组织数据）、references/ssr-auth.md（SSR cookie 认证、Vite 代理、CORS、路由守卫、FOUC、CF Workers）、references/better-auth-start.md（Better Auth + TanStack Start 的信号、RQ 包装、组织状态）、references/testing.md（测试路由、renderWithProviders）。
适用场景与限制
该技能适用于使用 TanStack Router、TanStack Start 与 TanStack Virtual 的 React Web 项目，用于指导架构、数据获取、性能优化与认证集成。文档未提供关于收费、价格、平台支持范围或效果保证的信息，暂未提供。