発行:

バックエンドとの連携

Next.js のようなフルスタックフレームワークとは異なり、ViteとReact Routerを使って構築する純粋な SPA (Single Page Application) は、 「フロントエンド（UI）」と「バックエンド（データ処理）」を明確に切り分ける アーキテクチャが一般的です。

フロントエンドとバックエンドの物理的分離

SPAとして動作するReactアプリは、公開時には単なる「JavaScriptファイル」の塊となります。

データベースへの直接アクセスは不可

ブラウザ上で動くJavaScriptから、データベース（MySQL, PostgreSQLなど）へ直接接続することはできません。セキュリティ上のリスクが極めて高いからです。

仲介としてのAPIサーバー

データベースへのアクセスやユーザー認証といった「重たい処理・秘密の処理」は、別のサーバー（APIサーバー）で行い、Reactアプリはそのサーバーと通信（HTTP通信）することでデータを取得します。

API通信の実装パターン

データの取得には標準の fetch APIを使うのが最もシンプルです。

loader内での非同期通信

React Routerの loader は、この非同期通信を記述する場所として最適です。

src/loaders/postLoader.js
export const postLoader = async ({ params }) => {
  // 環境変数からベースURLを取得
  const API_BASE = import.meta.env.VITE_API_BASE_URL;
  
  const response = await fetch(`${API_BASE}/posts/${params.id}`);
  
  if (!response.ok) {
    throw new Error("データの取得に失敗しました");
  }
  
  return response.json();
};

CORSの壁を乗り越える

SPA開発者が必ずと言っていいほど直面するのが CORS (Cross-Origin Resource Sharing) エラーです。

CORSエラーが起きる理由

ブラウザには「異なるドメイン間の通信を制限する」というセキュリティポリシーがあります。

  • フロント: http://localhost:5173
  • バック: http://localhost:8000
    このようにポート番号が違うだけでも別ドメインとみなされ、ブラウザが通信をブロックします。

解決策としてのバックエンド設定

このエラーは、 バックエンド（サーバー側）で「このフロントエンドからのアクセスを許可する」というレスポンスヘッダーを付与する ことで解決します。

  • Node.js/Express : cors ミドルウェアを使用。
  • Go/Python : 各フレームワークのCORS設定を適用。

まとめ

SPA構成を維持しつつバックエンドと連携するには、認証（JWTなど）や環境変数の正しい管理も重要になってきます。まずはシンプルな fetch から始め、外部の世界と接続される体験を味わってみましょう。