Remix.run中能否通过loader加载多个外部API数据？

完全可以把商品列表、下拉选项这两个首屏需要的API调用都放在loader中执行，这本身就是Remix loader的标准推荐用法，不存在单个loader只能承载一个请求的限制。

loader的核心作用就是在路由渲染前，把当前页面首屏需要的所有数据统一准备好，相比在客户端组件的useEffect里分散发请求，把首屏依赖的请求放在loader里有两个明显优势：

• 无依赖的请求可以直接并行发起，避免客户端渲染时的请求瀑布流，首屏加载速度更快
• 数据请求逻辑和路由绑定，代码维护性更强，不用在组件里分散处理多份数据的loading、错误状态

针对你提到的商品列表+下拉筛选的场景，直接用Promise.all并行发起两个请求即可，参考实现：

import { json } from "@remix-run/node";
import { useLoaderData } from "@remix-run/react";

export async function loader() {
  // 两个互不依赖的接口并行发起，没有先后阻塞
  const [productsResp, optionsResp] = await Promise.all([
    fetch("https://你的业务域名/api/product-list"),
    fetch("https://你的业务域名/api/filter-options")
  ]);

  if (!productsResp.ok || !optionsResp.ok) {
    throw new Response("数据加载失败", { status: 500 });
  }

  const [products, filterOptions] = await Promise.all([
    productsResp.json(),
    optionsResp.json()
  ]);

  return json({ products, filterOptions });
}

export default function ProductRoute() {
  const { products, filterOptions } = useLoaderData<typeof loader>();

  return (
    <div className="product-page">
      <select className="filter-select">
        {filterOptions.map(option => (
          <option key={option.value} value={option.value}>
            {option.label}
          </option>
        ))}
      </select>
      <div className="product-list">
        {products.map(item => (
          <div key={item.id} className="product-card">{item.name}</div>
        ))}
      </div>
    </div>
  );
}

几个实际开发要注意的点：

• 如果两个请求存在依赖关系（比如初始默认的筛选项ID要传给商品列表接口），直接在loader里按顺序调用即可，首屏阶段的依赖请求放在loader里处理比在客户端处理更顺畅
• 如果是用户操作下拉框切换选项触发的商品列表二次加载，不需要重新走整页loader刷新，用useFetcher发起局部请求更新列表数据体验更好
• 如果两个接口的容错是独立的（比如下拉选项加载失败不影响商品列表展示），不要直接用裸的Promise.all，可以给单个请求加catch兜底返回默认值，避免一个接口挂了整个页面报错
• loader里的请求默认是在服务端执行的，不需要担心把内部API的密钥、敏感地址暴露给前端

内容的提问来源于stack exchange，提问作者Dekso