設定
ランタイムの動作を設定するには、プロジェクトのルートに react-server.config.* または +*.config.* ファイルを作成する必要があります。このファイルはサーバーとビルドプロセスを設定するために使用します。ファイルタイプは .js、.mjs、.ts、.mts または .json です。
ランタイムの設定を拡張するには、+*.config.* ファイルを使用します。+*.config.* ファイルは react-server.config.* ファイルとマージされます。
+*.config.* ファイルはランタイムの設定を拡張したい場合に便利です。+*.config.*ファイルはいくつでも使うことができます。すべての設定ファイルは読み込まれた順にマージされます。
JavaScriptおよびTypeScriptの設定ファイルでは、defineConfigで設定をラップすることで、すべてのオプションに対する自動補完、型チェック、インラインの説明と例を含む完全なIntelliSenseを利用できます：
react-server.config.mjsimport { defineConfig } from "@lazarv/react-server/config";
export default defineConfig({
port: 3000,
adapter: "vercel",
});
JSON設定ファイルでは、$schemaプロパティを追加することで、エディタ上で直接バリデーションと自動補完を有効にできます：
react-server.config.json{
"$schema": "https://react-server.dev/schema.json",
"port": 3000,
"adapter": "vercel"
}
JSONスキーマはオフライン利用のためにパッケージ自体からも利用できます：
react-server.config.json{
"$schema": "node_modules/@lazarv/react-server/config/schema.json"
}
プロダクションモードでランタイムを実行するときに使用する設定のみを追加したい場合は、.production.config.* 拡張子を使用します。これらの設定ファイルはプロダクションモードでのみ読み込まれます。
同じように、.development.config.*という拡張子で設定ファイルを作ると、開発モード用に別の設定を使うことができます。
ビルドプロセスに設定を追加するには、.build.config.* ファイルを作成し、これらの設定ファイルはプロダクションビルド時にのみ使用されます。
拡張子が .runtime.config.* または .server.config.* の設定ファイルは、ビルドプロセスでは使用されません。
デフォルトとしてエクスポートする必要がある設定オブジェクトは、Vite configオブジェクトの拡張です。オプションの完全なリストはこちらにあります。
Viteの設定を完全に制御するために、viteオプションを使用してViteサーバとビルドプロセスを設定することができます。viteオプションはVite configオブジェクトを拡張したオブジェクト、または新しいVite configオブジェクトを返す関数です。関数として、Viteのデフォルト設定を発見したり変更したりすることができます。
また、vite.config.* ファイルを使用して、Vite プロジェクトで行うような Vite の設定を行うこともできます。vite.config.* ファイルは react-server.config.* ファイルとマージされます。
ベストプラクティスは、vite.config.*ファイルを使用してViteプロジェクトで行うようにViteを設定し、react-server.config.*ファイルを使用してランタイム固有のオプションを設定することです。
以下のオプションは @lazarv/react-server ランタイム固有のものです。
ランタイム・コンテクストに新しいエントリーを追加します。ランタイム・コンテクストはシングルトン・ストアであり、アプリケーションでstateを共有することが出来ます。
{
"runtime": {
"myEntry": "myValue"
}
}
runtime オプションはランタイム・コンテクストオブジェクトを返す関数を指定することも出来ます。これはランタイム・コンテクストを変更するときに便利です。
export default {
runtime: (runtime) => {
return {
...runtime,
myEntry: "myValue",
};
},
};
クッキーの設定を提供します。利用可能なオプションはこちらを参照してください。
export default {
cookies: {
path: "/",
maxAge: 60 * 60 * 24 * 30,
secure: true,
httpOnly: true,
sameSite: "lax",
},
};
ミドルウェアスタックに対して pre ハンドラおよび post ハンドラを追加できます。pre および post の各オプションには、非同期ハンドラ関数を配列として定義できます。
export default {
handlers: {
pre: [async () { ... }],
post: [async () { ... }]
}
}
handlersオプションには、ハンドラの配列を返す関数を指定することも出来ます。これは、使用するミドルウェアを変更したい場合に便利です。
export default {
handlers: (handlers) => {
return [...handlers, async () { ... }];
}
}
handlersオプションは配列を指定することも出来ます。その配列はpostハンドラとすることも出来ます。
公開ディレクトリは静的アセットを提供するディレクトリです。デフォルトのディレクトリはpublicです。
クライアントコンポーネントのモジュールの自動プリロードを無効にするには、 modulePreload オプションを使用します。modulePreload オプションにはBoolean値またはBoolean値を返す関数を指定することが出来ます。関数には非同期関数を指定することも出来ます。modulePreload オプションの値が false の場合、クライアントコンポーネントのモジュールはプリロードされません。
{
"modulePreload": false
}
クライアント・コンポーネントのモジュールのプリロードを無効にする関数を使用する場合
export default {
modulePreload: () => false,
};
アプリケーションコンテクスト全体が関数の中で利用可能なので、クライアントコンポーネントをプリロードするかどうかを決定するために、ランタイムによって提供されるすべてのヘルパーやフックを使用することが出来ます。
import { usePathname } from "@lazarv/react-server";
export default {
modulePreload: () => {
const pathname = usePathname();
return pathname !== "/";
},
};
デフォルトでは、@lazarv/react-serverは起動時（開発）およびビルド前（プロダクション）に設定ファイルをバリデーションします。設定に無効なオプションや禁止されたオプションが含まれている場合、明確なエラーメッセージが表示されます。
設定のバリデーションを無効にするには、--no-validation CLIフラグを使用します：
pnpm react-server ./App.jsx --no-validation pnpm react-server build --no-validation
バリデーションが正しい設定を誤って拒否する場合や、禁止されたオプションを意図的にバイパスする必要がある場合のエスケープハッチとして便利です。