前端的后端

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

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

成熟的应用程序已经在 Ruby、Elixir、PHP 等中有很多后端应用程序代码，没有理由为了获得 Remix 的好处而将其全部迁移到服务器端 JavaScript 运行时。相反，你可以将你的 Remix 应用程序用作前端的后端。

由于 Remix 填充了 Web Fetch API，你可以直接从你的加载器和操作中使用 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);
}

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

简化第三方集成，并将令牌和密钥保存在客户端包之外。
修剪数据以减少网络传输的 kB，从而显着加快你的应用程序的速度。
将大量代码从浏览器包移动到服务器，例如 escapeHtml，从而加快你的应用程序的速度。此外，将代码移动到服务器通常会使你的代码更容易维护，因为服务器端代码不必担心异步操作的 UI 状态。

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