フロントエンド用バックエンド

Remixは、フルスタックアプリケーションとしてだけでなく、BFF（Backend For Frontend）アーキテクチャにも完璧に適合します。

BFF戦略では、フロントエンドWebアプリケーションを提供し、必要なサービス（データベース、メーラー、ジョブキュー、既存のバックエンドAPI（RESTやGraphQL）など）に接続することを仕事とするWebサーバーを採用します。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をそれに接続させることができます。