前端的後端

雖然 Remix 可以作為您的全端應用程式，但它也非常適合「前端的後端」架構。

BFF 策略採用一個 Web 伺服器，其工作範圍限定於服務前端 Web 應用程式並將其連接到它需要的服務：您的資料庫、郵件程式、工作佇列、現有的後端 API (REST、GraphQL) 等。您的 UI 不是直接從瀏覽器整合到這些服務，而是連接到 BFF，而 BFF 會連接到您的服務。

成熟的應用程式已經在 Ruby、Elixir、PHP 等中有很多後端應用程式程式碼，沒有理由為了獲得 Remix 的好處而將所有程式碼遷移到伺服器端 JavaScript 執行階段。相反地，您可以將您的 Remix 應用程式用作前端的後端。

由於 Remix 會對 Web Fetch API 進行 polyfill，因此您可以直接從您的 loader 和 action 使用 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 連接到它。