PRNext 0.1.22-alpha:パフォーマンスが大きく向上

PRNext 0.1.22-alpha を npm で公開しました。千行のテーブルを使った開発ベンチマークでは、Flight スループットの中央値が 7.7 倍、SSR スループットが 3.97 倍になり、デコード後の Flight ペイロードは 72.1% 減少しました。同じテーブルで、最適化を無効にした場合と有効にした場合を比較しています。

対象となる表示コンポーネントには自動で適用されます。「use presentation」を追加する必要はありません。PRNext は再利用できる構造と表示する値を送り、計算はサーバーで実行し、完全な HTML を維持します。利用するには PRNext を更新してアプリを再ビルドしてください。

テスト用テーブルで Flight スループットが最大 7.7 倍に

開発時のソース 270ae481 で、同じテーブルの最適化を無効と有効にして比較しました。千行では SSR のスループット中央値が毎秒 48.611 件から 192.765 件となり、約 3.97 倍でした。Flight は 80.472 件から 619.413 件で約 7.70 倍です。p95 はそれぞれ 100.52 から 28.78 ms、61.65 から 8.806 ms に下がりました。

テーブルの HTML は同一です。デコード後の Flight は 266,672 バイトから 74,353 バイトへ 72.1% 減少し、gzip 後は 36.1% 減少しました。符号化されたブラウザー JavaScript は 606 バイト増え、追加リクエストが二件必要でした。

ローカル測定は Windows x64、Node 24.22.1、二つの worker、四接続で、12 論理プロセッサー、32 GiB の共有 PC を使用しました。測定全体には百行の SSR シナリオも含みます。交互の三組、各窓のウォームアップ一秒と測定三秒で計 18 窓、21,523 応答を検証し、エラーはありませんでした。両方とも同じ再ビルド済み 0.1.21 ネイティブバイナリーを使用しています。これは開発ソースの測定で、最終 npm アーカイブの測定や Next.js との比較ではありません。メモリーは条件により異なり、ブラウザーの改善は未確定です。SQL、業務ロジック、DOM 処理が七倍速くなるわけではありません。

構造を一度だけ転送する

Flight は React Server Components の出力をブラウザーに運びます。多数の行が同じ構造を持つ場合、各要素の記述が表示データ以上の負担になることがあります。PRNext は一部の同期的で純粋な表示コンポーネントを認識し、静的マークアップをコンパイルして、React 公式のクライアント参照とコンパクトな表示スロットを使います。Flight のプロトコルとデコーダーは、対応する React のものを維持します。

ブラウザーは小さな表示モジュールを取得するため、JavaScript の転送と実行は残ります。その読み込み前にも、サーバーは完全な HTML を生成します。小さなリストや非対応の値は通常の表現を使えます。表現形式が変わっただけで DOM のルートを置き換えることはありません。

データテーブル、ディレクトリ、表示用カードの長い一覧には、同じマークアップが何度も現れることがあります。構造と表示する値を分けることで、PRNext は Flight で UI を記述するための処理を減らします。アプリの計算や認可は引き続きサーバーで行います。効果は、対象となる表示内容をどれだけ送る必要があるかによって変わります。

非公開の計算はサーバーに残す

コンパクトな経路では、row.revenue-row.privateCost のような式はサーバーで評価します。ブラウザーが受け取るのは表示結果であり、両方のオペランドや元の式ではありません。表示テキストを選ぶ条件も同様です。未使用のフィールドが自動的にブラウザーの props になることはありません。

この変換はアカウント間の共有ページキャッシュを追加せず、認可処理も代替しません。表示データの認可は引き続きアプリケーションの責任です。インポート、Hook、副作用、独自コンポーネント、対話型コントロール、生の HTML、未検証の属性は通常の経路を使います。

適用範囲を明確に保つ

自動コンパイルは本番 Node App Router ビルドが対象です。開発モード、Pages、Edge、HTML のみの出力は従来どおりです。独自の webpack や JSX パイプラインは互換性を確認できなければ通常のレンダリングを維持します。プラグインが追加する Hook も同じです。適用率を上げるために必要なプラグインを外さないでください。

ビルド後の .prnext/presentation-report.json はコンパイラーの判断を説明し、実際のリクエストの適用率は示しません。検証では対応するコンパクトな負荷と、翻訳パイプラインを使う認証付き PostgreSQL SaaS を分け、後者の通常経路を維持します。二十分の診断は二時間の耐久試験とは別の証拠です。

更新してアプリケーションを検証する

ロールバックのため、以前のソース、ロックファイル、設定、完全なデプロイを保存してください。バージョンをインストールし、アプリケーションを再ビルドして、同じバージョンのフレームワークとネイティブパッケージで worker を再起動します。実行中のプロセスの下でファイルを交換しても、読み込み済みコードは更新されません。

比較する場合は prnext.config.mjs で presentationComponents: false を設定し、両方を再ビルドします。ハイドレーション、ナビゲーション、アカウント切り替え、フォーム、ストリーム中断、デプロイとロールバックの間も開いたままのタブを確認してください。古い変更要求は自動再実行せず拒否する必要があります。PRNext は Next.js と部分的に互換性のある alpha です。判断の基準は自分のアプリケーションの結果です。

Terminal
npm install @thomas.f/prnext@0.1.22-alpha
npx --no-install prnext check --production --json
npx --no-install prnext build

実装と適用範囲

アップグレードガイド

ブログに戻る