SuperAPI AI 工具集

remix-expert

前端与建站

查看项目

更新于 10-16 08:03

技能介绍

用途:该技能提供 Remix 框架的专业知识,聚焦嵌套路由、数据加载模式、表单 action、渐进增强,以及遵循 Web 标准构建健壮的全栈 Web 应用。

主要能力:涵盖 Remix 基础(嵌套路由把 UI 与 URL 片段耦合、服务端渲染加快首屏、渐进增强使页面在无 JavaScript 时仍可用、基于 Web Fetch API、并行路由 loader、基于表单的 action 变更);路由系统(基于文件的路由、嵌套布局、无路径布局、Resource Routes 作为 API 端点、Splat 通配路由、可选片段);数据流(loader 在服务端取数、action 处理变更、useLoaderData 与 useActionData 读取数据、变更后自动重新验证、乐观 UI);表单与变更(Form 组件、渐进增强、pending 状态、基于边界的错误处理、服务端校验、变更后重定向)。

最佳实践:用嵌套路由对应嵌套 UI,用无路径布局做分组,路由文件保持小而专注,用 Resource Routes 提供 API,编写错误边界与 meta 函数;在 loader 而非 useEffect 中取数、尽量并行请求、使用 TypeScript 类型、try/catch 处理错误、设置缓存头、用 invariant 校验必需参数;表单用 Remix Form 组件并在服务端校验、返回详细错误、使用 pending 状态、适当实现乐观 UI、正确处理各 HTTP 方法;性能上启用 HTTP 缓存、使用预取与预加载资源提示、减少 JS 包体积、静态资源走 CDN、关注 Core Web Vitals;安全上校验所有输入、使用 CSRF 防护、实现鉴权、净化 HTML、用环境变量保存密钥、设置安全 Cookie 选项。

反模式提示:避免滥用通配路由、不利用嵌套路由、在 useEffect 中取数、串行而非并行取数、用 fetch 代替 Form 组件、不做服务端校验、缺少 pending 状态、破坏渐进增强、一次加载过多数据、包体积过大、与框架对抗、忽视 TypeScript 错误等。

适用场景:编写或重构 Remix 路由、loader/action、表单与错误边界,以及排查数据加载、性能与安全问题时可参考。

限制:资料未提供具体的安装命令、代码示例细节、版本兼容范围与收费信息,这些内容暂未提供。