SuperAPI AI 工具集

remix

前端与建站

查看项目

更新于 10-15 18:52

技能介绍

用途:该技能面向 Remix(React 全栈元框架)开发,帮助在构建 Remix 应用时正确使用其数据加载、变更处理与路由约定。资料说明它不适用于纯 React、Next.js、Nuxt、SvelteKit、Astro 或 React Router SPA,这些应改用对应技能。

主要能力:核心概念包括 loader(GET 请求与数据获取)、action(POST/PUT/DELETE 变更)、Form(渐进增强表单)、useLoaderData(读取 loader 数据)、useFetcher(非导航式变更)。支持嵌套路由文件约定,如 _index.tsx、users.tsx、users._index.tsx、users.$id.tsx。还涵盖 ErrorBoundary 错误处理、defer 与 Await 流式渲染、Cache-Control 缓存头、基于 cookie 的会话管理与 requireUser 重定向、Zod 输入校验、CSRF 与安全响应头、@remix-run/testing 与 Playwright 测试,以及 TTFB、FCP、CLS 等监控指标。

使用方式:在路由模块中导出 loader 与 action,客户端用 useLoaderData 与 Form 消费数据;非导航变更用 useFetcher;每个路由可导出 ErrorBoundary;慢数据用 defer 配合 Suspense 与 Await;会话通过 createCookieSessionStorage 管理并在响应中提交。资料提到可用 mcp__documentation__fetch_docs 并指定 technology: remix 获取完整文档,advanced.md 含 WebSocket、SSE、Socket.IO 与房间管理内容。

限制与注意:资料列出反模式,如在 useEffect 中取数、不用 Form、忽略 ErrorBoundary、把业务逻辑放进组件、不校验 formData、用 fetch 代替 fetcher、缺少缓存头、把密钥写入客户端代码。常见问题包括 useLoaderData 返回 undefined、表单提交无效、action 后数据未更新、嵌套路由 404、会话不持久、水合不匹配等,均给出对应排查方向。具体安装命令与版本信息暂未提供。