Singlefile

実験的: このアダプタは実験的であり、将来のリリースで変更される可能性があります。シンプルなシングルページアプリケーションや静的サイトを対象としています。

singlefile アダプタは、静的エクスポートされた React アプリケーション全体を単一の自己完結型 HTML ファイルにバンドルします。すべての CSS と JavaScript モジュールがインライン化され、実行時に外部リソースを取得する必要がありません。

以下のような用途に便利です：

追加のパッケージは不要です — アダプタは @lazarv/react-server に組み込まれています。

react-server.config.mjs ファイルにアダプタを追加します：

export default {
  adapter: "singlefile",
};

または CLI で指定します：

pnpm react-server build ./src/index.jsx --adapter singlefile

singlefile アダプタはビルド時に以下のステップを実行します：

静的エクスポート — "/" ルートを静的エクスポートして index.html を生成します
CSS のインライン化 — すべての <link rel="stylesheet"> タグをインライン <style> ブロックに置換します。React Server Component のフライトデータ内の CSS 参照は data: URI に変換されます
JS モジュールのインライン化 — すべてのクライアント側 ES モジュールを base64 エンコードしてブート <script> に埋め込みます。実行時にデコードされ、blob URL として動的な import map を通じて接続されます
クリーンアップ — modulepreload ヒント、開発用ライブリロードリンク、静的 import map が削除されます

結果として、アプリのレンダリングとハイドレーションに必要なすべてを含む単一の dist/index.html ファイルが生成されます。

アプリケーションをビルドします：

pnpm react-server build [root] --adapter singlefile

単一ファイルを含む dist/ ディレクトリが生成されます：

dist/
└── index.html    # CSS + JS がすべてインライン化された自己完結型 HTML

出力ファイルは以下のいずれかの方法で使用できます：

# ブラウザで直接開く
open dist/index.html

# 任意の静的ファイルサーバーで配信
npx serve dist

# または Python で配信
python3 -m http.server 3000 --directory dist

単一ルートのみ — "/" パスのみがエクスポートされます。ファイルベースルーティングを使用するマルチページアプリケーションはサポートされていません。
サーバー側機能なし — サーバーアクション、API ルート、動的サーバーレンダリングは利用できません。出力は純粋に静的です。
ファイルサイズ — すべてのアセットがインライン化されるため（JS モジュールは base64 エンコード）、出力ファイルは個別ファイルの合計より大きくなります（JS は base64 により約 33% のオーバーヘッド）。
SPA モード推奨 — このアダプタはシングルページアプリケーションに最適です。クライアントコンポーネントとクライアント側ルーティングと併用してください。

インストール