パーシャルリロード
すでに表示している同じページに対して再度訪問する場合、必ずしもページのすべてのデータをサーバーから再取得する必要はありません。実際には、ページの一部のデータが古くなることを許容できるのであれば、データの一部だけを取得することで有効なパフォーマンス最適化になります。Inertia では「部分的リロード(partial reload)」機能によって、これを実現できます。
例として、「ユーザー一覧」ページを考えてみましょう。このページにはユーザーのリストと、会社ごとにユーザーを絞り込むオプションが含まれています。最初のリクエストでは、users と companies の両方の props がページコンポーネントに渡されます。しかし、その後同じページに再訪問する場合(たとえばユーザーを絞り込む場合)、companies のデータを再取得せずに、users データのみをサーバーにリクエストできます。Inertia は、サーバーから返された部分的なデータを、クライアント側のメモリにすでに保持しているデータと自動的にマージします。
部分的リロードは、同じページコンポーネントに対する訪問でのみ機能します。
特定の Props のみ取得する
部分的リロードを行うには、only 訪問オプションを使用して、サーバーが返すべきデータを指定します。このオプションは、props のキーに対応するキーの配列です。
特定の Props を除外する
only ビジットオプションに加えて、except オプションを使用し、サーバーが除外すべきデータを指定することもできます。このオプションも、props のキーに対応するキーの配列です。
ルーターのショートハンド
部分的リロードは、ユーザーがすでに表示している同じページコンポーネントに対してのみ行えるため、ほとんどの場合は現在の URL を自動的に使用する router.reload() メソッドを使うのが合理的です。
リンクを使用する
Inertia のリンクでは、only プロパティを使用して部分的リロードを行うことも可能です。
遅延データ評価
部分的リロードを最大限に活用するために、サーバーサイドのルートやコントローラーから props を返す際には、遅延データ評価も必ず使用してください。これは、任意のページデータをすべてクロージャでラップすることで実現できます。
return Inertia::render('Users/Index', [
'users' => fn () => User::all(),
'companies' => fn () => Company::all(),
]);Inertia がリクエストを実行すると、どのデータが必要かを判断し、その場合にのみクロージャを評価します。これにより、多くの任意データを含むページのパフォーマンスを大幅に向上させることができます。
さらに、Inertia には Inertia::optional() メソッドがあり、only オプションで明示的に要求されない限り、その prop を決して含めないよう指定できます。
return Inertia::render('Users/Index', [
'users' => Inertia::optional(fn () => User::all()),
]);逆に、Inertia::always() メソッドを使用すると、部分的リロードで明示的に要求されていない場合でも、常に含める prop を指定できます。
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 にチェーンすることで、データが一度だけ解決され、その後のナビゲーションでもクライアントによって記憶されるようにできます。
return Inertia::render('Users/Index', [
'users' => Inertia::optional(fn () => User::all())->once(),
]);once props の詳細については、once props のドキュメントを参照してください。