服务于前端的后端 (BFF)

虽然 React Router 可以作为您的全栈应用程序，但它也完美地融入了“服务于前端的后端 (BFF)”架构。

BFF 策略采用一个 Web 服务器，其工作范围是为前端 Web 应用提供服务，并将其连接到所需的服务：您的数据库、邮件发送器、作业队列、现有的后端 API（REST、GraphQL）等。您的 UI 不是直接从浏览器与这些服务集成，而是连接到 BFF，再由 BFF 连接到您的服务。

成熟的应用程序已经在 Ruby、Elixir、PHP 等语言中拥有大量后端应用程序代码，没有理由仅仅为了获得 React Router 的好处就将所有代码迁移到服务器端 JavaScript 运行时。相反，您可以将您的 React Router 应用程序用作前端的后端。

您可以直接在加载器 (loader) 和操作 (action) 中使用 fetch 来访问您的后端。

import escapeHtml from "escape-html";

export async function loader() {
  const apiUrl = "https://api.example.com/some-data.json";
  const res = await fetch(apiUrl, {
    headers: {
      Authorization: `Bearer ${process.env.API_TOKEN}`,
    },
  });

  const data = await res.json();

  const prunedData = data.map((record) => {
    return {
      id: record.id,
      title: record.title,
      formattedBody: escapeHtml(record.content),
    };
  });
  return { prunedData };
}

与直接从浏览器获取数据相比，这种方法有几个好处。上面高亮显示的行展示了您可以如何：

简化第三方集成，并将令牌和密钥排除在客户端包之外
精简数据，以减少通过网络发送的 kB，从而显著加快您的应用程序
将大量代码从浏览器包移至服务器，例如 escapeHtml，这可以加快您的应用程序。此外，将代码移至服务器通常会使您的代码更易于维护，因为服务器端代码不必担心异步操作的 UI 状态

再次强调，React Router 可以通过使用服务器端 JavaScript API 直接与数据库和其他服务通信，作为您唯一的服务器，但它也可以完美地作为您前端的后端。您可以继续保留现有的 API 服务器来处理应用程序逻辑，让 React Router 将 UI 连接到它。