ミドルウェアモード

@lazarv/react-serverの開発サーバや本番サーバをミドルウェアモードで実行することもできます。これにより、既存のサーバやフレームワークに@lazarv/react-serverを統合することが可能になります。ミドルウェアモードでは、@lazarv/react-serverはHTTPサーバを起動せず、既存のサーバ内で使用できるミドルウェア関数を提供します。

開発サーバを使用するには、@lazarv/react-server/devからreactServerをインポートし、エントリーポイントへのパスを渡す必要があります。このパスは、react-server CLIに渡すものと同じです。パスは作業ディレクトリから解決可能である必要があり、reactServerを呼び出すファイルからの相対パスではありません。

import { reactServer } from '@lazarv/react-server/dev';

const server = reactServer("./src/App.tsx");
app.use("/react-server", async (req, res, next) => {
  const { middlewares } = await server;
  middlewares(req, res, next);
});

本番環境では、インポート元を@lazarv/react-server/nodeに変更し、reactServer関数にoriginオプションを渡すだけです。

import { reactServer } from '@lazarv/react-server/node';

const server = reactServer({
  origin: 'http://localhost:3000',
});
app.use("/react-server", async (req, res, next) => {
  const { middlewares } = await server;
  middlewares(req, res, next);
});

注意: reactServer関数は、middlewares関数を含むオブジェクトを解決するPromiseを返します。middlewares関数を使用する前に、このPromiseをawaitする必要があります。

@lazarv/react-serverのミドルウェアをサーバに追加する際、通常はパスを指定します。このパスがルートパスでない場合、アプリのベースURLを定義する必要があります。これはサーバがアセットのパスを正しく解決するために必要です。ベースURLを定義するには、react-server.config.jsonファイルにbaseオプションを追加します。

{
  "base": "/react-server/"
}