前端的后端

虽然 Remix 可以作为你的完整栈应用程序，但它也完美地契合了“前端的后端”架构。

BFF 策略使用一个 Web 服务器，其任务范围是服务于前端 Web 应用程序并将其连接到它所需的各种服务：你的数据库、邮件发送器、作业队列、现有的后端 API（REST、GraphQL）等等。你的 UI 不会直接从浏览器集成到这些服务，而是连接到 BFF，而 BFF 再连接到你的服务。

成熟的应用程序已经有很多后端应用程序代码是用 Ruby、Elixir、PHP 等语言编写的，没有理由为了获得 Remix 的优势而将所有代码迁移到服务器端 JavaScript 运行时。相反，你可以将你的 Remix 应用程序用作前端的后端。

因为 Remix 为 Web Fetch API 提供了 polyfill，所以你可以直接在你的加载器和操作中使用 fetch 来访问你的后端。

import type { LoaderFunctionArgs } from "@remix-run/node"; // or cloudflare/deno
import { json } from "@remix-run/node"; // or cloudflare/deno
import escapeHtml from "escape-html";

export async function loader({
  request,
}: LoaderFunctionArgs) {
  const apiUrl = "http://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 json(prunedData);
}

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

1. 简化第三方集成，并将令牌和密钥排除在客户端捆绑包之外。
2. 减少需要发送的数据量，从而显著加快应用程序速度。
3. 将大量代码从浏览器捆绑包移动到服务器，例如 escapeHtml，从而加快应用程序速度。此外，将代码移动到服务器通常会使代码更容易维护，因为服务器端代码不必担心异步操作的 UI 状态。

同样，Remix 可以通过与数据库和其他服务使用服务器端 JavaScript API 进行通信，作为你唯一的服务器，但它也可以完美地用作前端的后端。继续使用你现有的 API 服务器来处理应用程序逻辑，并让 Remix 将 UI 连接到它。