Backend For Frontend

Backend For Your Frontend

Remix 不仅可以作为您的全栈应用程序，还可以完美适应 BFF 架构。

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);
}

与直接从浏览器获取相比，此方法有几个优点。上面突出显示的行显示了您可以如何：

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

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