Defered Props

Inertia の遅延 props 機能を使うと、初回のページ描画後まで特定のページデータの読み込みを遅らせることができます。これにより、初回のページ描画をできるだけ速く行えるため、アプリの体感パフォーマンスを向上させるのに役立ちます。

サーバーサイド

prop を遅延させるには、レスポンスを返す際に Inertia::defer() メソッドを使用します。このメソッドは、prop データを返すコールバックを受け取ります。コールバックは、初回のページ描画後に別リクエストとして実行されます。

Route::get('/users', function () {
    return Inertia::render('Users/Index', [
        'users' => User::all(),
        'roles' => Role::all(),
        'permissions' => Inertia::defer(fn () => Permission::all()),
    ]);
});

リクエストのグルーピング

デフォルトでは、すべての遅延 props は初回ページ描画後に 1 つのリクエストで取得されますが、props をグループ化することで並列にデータを取得することもできます。

Route::get('/users', function () {
    return Inertia::render('Users/Index', [
        'users' => User::all(),
        'roles' => Role::all(),
        'permissions' => Inertia::defer(fn () => Permission::all()),
        'teams' => Inertia::defer(fn () => Team::all(), 'attributes'),
        'projects' => Inertia::defer(fn () => Project::all(), 'attributes'),
        'tasks' => Inertia::defer(fn () => Task::all(), 'attributes'),
    ]);
});

上記の例では、teams、projects、tasks の props は 1 つのリクエストで取得され、一方で permissions の prop は別のリクエストとして並列に取得されます。グループ名は任意の文字列で、自由に指定できます。

クライアントサイド

クライアントサイドでは、Inertia は遅延 props を管理するための Deferred コンポーネントを提供しています。このコンポーネントは、指定された遅延 props が利用可能になるまで自動的に待機し、その後に子要素を描画します。

複数の遅延 Props

複数の遅延 props が利用可能になるのを待つ必要がある場合は、data prop に配列を指定できます。

Once Props との組み合わせ

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

return Inertia::render('Dashboard', [
    'stats' => Inertia::defer(fn () => Stats::generate())->once(),
]);

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