静的生成
ページを静的としてマークすると、ファイルシステムベースのルーターがそのページを@lazarv/react-serverのエクスポートに追加します。
ページを静的としてマークするには、ページの一致するパスに.static.{js,mjs,ts,mts,json}拡張子のファイルを作成し、そのルートで使用可能なパラメータの配列、またはパラメータの配列を返す関数をデフォルトエクスポートします。関数は非同期関数にすることもできます。
パラメータのないページの場合は、デフォルトでtrueをエクスポートします。
users.static.tsexport default true;
ページを静的としてマークする最も簡単な方法は、trueを定義した.static.jsonファイルを作成することです。
users.static.jsontrue
警告: パラメータを持つルートでは
trueを値として使用できません。使用可能なパラメータの配列、またはパラメータの配列を返す関数を定義する必要があります。パラメータを持つルートでtrueを使用すると、ビルドが失敗します。
動的ルートの場合、/users/:idにページがある場合、/users/[id].static.tsに以下の内容のファイルを作成できます：
users/[id].static.tsexport default [{ id: 1 }, { id: 2 }, { id: 3 }];
ルートパラメータの配列、またはルートパラメータの配列を返す非同期関数をエクスポートできます。
users/[id].static.tsexport default async () => [{ id: 1 }, { id: 2 }, { id: 3 }];
関数はビルド時に実行され、その結果が静的ページの生成に使用されます。
.static.json拡張子のファイルを作成することで、静的ページに静的JSONデータを使用できます。
たとえば、/users/:idにページがある場合、/users/[id].static.jsonに以下の内容のファイルを作成できます：
users/[id].static.json[{ "id": 1 }, { "id": 2 }, { "id": 3 }]
注意: 静的ルートはページコンポーネントとは独立して定義しています。これはルーティングとページレンダリングの関心事を分離するためです。この方法により、ルーターはビルド時にページコンポーネントを定義するコードをインポートする必要がなくなります。これは、ページコンポーネントの依存関係ツリーが大きい場合や、コードに副作用がある場合に便利です。
@lazarv/react-serverの設定ファイルでexport()関数を定義することで、すべての静的パスをオーバーライドできます。この関数はすべての静的パスの配列とともに呼び出され、デフォルトの静的パスをオーバーライドする新しいパスの配列を返すことができます。この例では、すべての静的パスから/enプレフィックスを削除しています。
react-server.config.mjsexport default {
export(paths) {
return paths.map(({ path }) => ({
path: path.replace(/^\/en/, ""),
}));
},
};
この関数を使用して、新しい静的パスを追加したり、一部のパスを削除したりすることもできます。
react-server.config.mjsexport default {
export(paths) {
return [
...paths,
{ path: "/new-page" },
];
},
};
react-server.config.mjsexport default {
export(paths) {
return paths.filter(({ path }) => path !== "/en");
},
};
APIルートを静的ルートとしてエクスポートすることもできます。これを行うには、静的パスをpath、filename、method、headersプロパティを持つオブジェクトとして定義します。pathはルートパス、filenameは静的ファイルのファイル名、methodはリクエストのHTTPメソッド、headersはリクエストのヘッダーを持つオブジェクトです。methodとheadersはオプションです。
react-server.config.mjsexport default {
export() {
return [
{
path: "/sitemap.xml",
filename: "sitemap.xml",
method: "GET",
headers: {
accept: "application/xml",
},
},
];
},
}
マイクロフロントエンドルートを静的としてエクスポートすることもできます。これを行うには、静的パスをpathとremoteプロパティを持つオブジェクトとして定義します。pathはルートパス、remoteはそのルートがマイクロフロントエンドルートであり、ビルド時にリモートレスポンスペイロードを生成する必要があることを示すフラグです。マイクロフロントエンドの静的エクスポートを使用することで、ビルド時にマイクロフロントエンドのコンテンツを事前レンダリングし、アプリケーションのパフォーマンスを向上させることができます。
react-server.config.mjsexport default {
export() {
return [
{
path: "/",
remote: true,
}
];
},
};
アウトレットを静的としてエクスポートすることもできます。これを行うには、静的パスをpathとoutletプロパティを持つオブジェクトとして定義します。pathはルートパス、outletはアウトレットの名前です。アウトレットの静的エクスポートを使用することで、ビルド時にアウトレットのコンテンツを事前レンダリングし、アプリケーションのパフォーマンスを向上させることができます。エクスポートされたアウトレットはRSCコンポーネントとしてレンダリングされます。エクスポートされたアウトレットへのクライアントサイドナビゲーションでは、サーバーにリクエストを送信する代わりに、静的なアウトレットコンテンツが使用されます。
react-server.config.mjsexport default {
export() {
return [{ path: "/photos/1", outlet: "modal" }];
},
};
rscプロパティをfalseに設定することで、RSCルートの静的エクスポートを無効にできます。これは、ページがRSCルートであるが、ビルド時に事前レンダリングしたくない場合や、そのルートのRSCペイロードを使用する予定がない場合に便利です。これにより、ビルド時にRSCペイロードが生成されなくなり、ルートは通常のHTMLページとしてのみレンダリングされ、デプロイメントサイズが削減されます。
react-server.config.mjsexport default {
export() {
return [{ path: "/photos/1", rsc: false }];
},
};