SuperAPI AI 工具集

sfnext-data-fetching

前端与建站

查看项目

更新于 10-16 05:44

技能介绍

该技能围绕 Storefront Next 的服务端数据获取展开。其核心原则是仅供服务端加载数据:所有 SCAPI 请求都在 MRT 服务器执行,绝不在浏览器中发起。资料给出三种机制:loader 在路由导航时运行,用于初始页面数据;action 在表单提交时运行,用于变更操作(如加入购物车、更新资料);useScapiFetcher 在用户交互时运行,用于按需获取(如搜索建议、无限滚动)。

loader 可分为同步与异步两种写法。同步 loader 直接返回 Promise,启用流式 SSR,页面外壳立即渲染、数据逐步流入;异步 loader 在渲染前等待关键数据,适用于 SEO 或页面外壳所需的数据,非关键数据仍可返回 Promise 以流式传输;也支持混合策略,先 await 关键数据再流式返回其余部分。

action 用于处理变更:从 request 读取 formData,使用 createApiClients(context) 创建客户端并调用相应接口,成功返回 data({ success: true }),失败返回带状态码的错误数据。

useScapiFetcher 用于页面加载后由用户交互触发的按需获取,例如以 shopperSearch、getSearchSuggestions 及参数调用,并可通过 fetcher.load() 重新获取,读取 fetcher.data 与 fetcher.state。

用法上,loader 与 action 中应始终使用 createApiClients(context);注意并行与顺序请求的差异,独立请求应并行返回 Promise,避免依次 await。常见陷阱包括 await 全部数据会不必要地阻塞页面切换、Storefront Next 不允许客户端 loader、顺序 await 拖慢加载、getConfig() 缺少 context 导致配置不可用(服务端 loader 应传入 getConfig(context))。

适用场景为 Storefront Next 项目的服务端数据加载、表单变更与交互式按需请求。限制方面,客户端 loader 不被允许;需正确传递 context。资料未提供收费、价格或性能数据,相关细节暂未提供。