パーシャルリロード

すでに表示している同じページに対して再度訪問する場合、必ずしもページのすべてのデータをサーバーから再取得する必要はありません。実際には、ページの一部のデータが古くなることを許容できるのであれば、データの一部だけを取得することで有効なパフォーマンス最適化になります。Inertia では「部分的リロード(partial reload)」機能によって、これを実現できます。

例として、「ユーザー一覧」ページを考えてみましょう。このページにはユーザーのリストと、会社ごとにユーザーを絞り込むオプションが含まれています。最初のリクエストでは、userscompanies の両方の props がページコンポーネントに渡されます。しかし、その後同じページに再訪問する場合(たとえばユーザーを絞り込む場合)、companies のデータを再取得せずに、users データのみをサーバーにリクエストできます。Inertia は、サーバーから返された部分的なデータを、クライアント側のメモリにすでに保持しているデータと自動的にマージします。

部分的リロードは、同じページコンポーネントに対する訪問でのみ機能します。

特定の Props のみ取得する

部分的リロードを行うには、only 訪問オプションを使用して、サーバーが返すべきデータを指定します。このオプションは、props のキーに対応するキーの配列です。

特定の Props を除外する

only ビジットオプションに加えて、except オプションを使用し、サーバーが除外すべきデータを指定することもできます。このオプションも、props のキーに対応するキーの配列です。

ルーターのショートハンド

部分的リロードは、ユーザーがすでに表示している同じページコンポーネントに対してのみ行えるため、ほとんどの場合は現在の URL を自動的に使用する router.reload() メソッドを使うのが合理的です。

リンクを使用する

Inertia のリンクでは、only プロパティを使用して部分的リロードを行うことも可能です。

遅延データ評価

部分的リロードを最大限に活用するために、サーバーサイドのルートやコントローラーから props を返す際には、遅延データ評価も必ず使用してください。これは、任意のページデータをすべてクロージャでラップすることで実現できます。

php
return Inertia::render('Users/Index', [
    'users' => fn () => User::all(),
    'companies' => fn () => Company::all(),
]);

Inertia がリクエストを実行すると、どのデータが必要かを判断し、その場合にのみクロージャを評価します。これにより、多くの任意データを含むページのパフォーマンスを大幅に向上させることができます。

さらに、Inertia には Inertia::optional() メソッドがあり、only オプションで明示的に要求されない限り、その prop を決して含めないよう指定できます。

php
return Inertia::render('Users/Index', [
    'users' => Inertia::optional(fn () => User::all()),
]);

逆に、Inertia::always() メソッドを使用すると、部分的リロードで明示的に要求されていない場合でも、常に含める prop を指定できます。

php
return Inertia::render('Users/Index', [
    'users' => Inertia::always(User::all()),
]);

以下は各アプローチのまとめです。

アプローチ通常の訪問部分的リロード評価タイミング
User::all()常に任意常に
fn () => User::all()常に任意必要なときのみ
Inertia::optional(fn () => User::all())なし任意必要なときのみ
Inertia::always(fn () => User::all())常に常に常に

Once Props と組み合わせる

once() 修飾子を optional な prop にチェーンすることで、データが一度だけ解決され、その後のナビゲーションでもクライアントによって記憶されるようにできます。

php
return Inertia::render('Users/Index', [
    'users' => Inertia::optional(fn () => User::all())->once(),
]);

once props の詳細については、once props のドキュメントを参照してください。