前端后端

¥Backend For Your Frontend

虽然 Remix 可以作为你的全栈应用，但它也完美适配 "前端的后端" 架构。

¥While Remix can serve as your fullstack application, it also fits perfectly into the "Backend for your Frontend" architecture.

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

¥The BFF strategy employs a web server with a job scoped to serving the frontend web app and connecting it to the services it needs: your database, mailer, job queues, existing backend APIs (REST, GraphQL), etc. Instead of your UI integrating directly from the browser to these services, it connects to the BFF, and the BFF connects to your services.

成熟的应用已经拥有大量使用 Ruby、Elixir、PHP 等编写的后端应用代码，没有理由仅仅为了获得 Remix 的优势而将它们全部迁移到服务器端 JavaScript 运行时。你可以将 Remix 应用用作前端的后端。

¥Mature apps already have a lot of backend application code in Ruby, Elixir, PHP, etc., and there's no reason to justify migrating it all to a server-side JavaScript runtime just to get the benefits of Remix. Instead, you can use your Remix app as a backend for your frontend.

由于 Remix 填充了 Web Fetch API，你可以直接从加载器和操作中使用 fetch 到后端。

¥Because Remix polyfills the Web Fetch API, you can use fetch right from your loaders and actions to your backend.

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 = "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 json(prunedData);
}

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

¥There are several benefits of this approach vs. fetching directly from the browser. The highlighted lines above show how you can:

简化第三方集成，并将令牌和密钥从客户端包中移除。

¥Simplify third-party integrations and keep tokens and secrets out of client bundles.
精简数据以减少通过网络传输的 KB 数据，从而显著加快应用速度。

¥Prune the data down to send less kB over the network, speeding up your app significantly.
将大量代码从浏览器包移到服务器，例如 escapeHtml，这会加快应用速度。此外，将代码移动到服务器通常会使你的代码更易于维护，因为服务器端代码不必担心异步操作的 UI 状态。

¥Move a lot of code from browser bundles to the server, like escapeHtml, which speeds up your app. Additionally, moving code to the server usually makes your code easier to maintain since server-side code doesn't have to worry about UI states for async operations.

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

¥Again, Remix can be used as your only server by talking directly to the database and other services with server-side JavaScript APIs, but it also works perfectly as a backend for your frontend. Go ahead and keep your existing API server for application logic and let Remix connect the UI to it.