部分的な再読み込み

既に表示されている同じページにアクセスする場合、必ずしもサーバーからページの全データを再取得する必要はありません。実際、ページデータの一部が古くなることが許容される場合、データのサブセットのみを選択することは、パフォーマンスを最適化するのに役立つ場合があります。Inertiaは、「部分的な再読み込み」機能によってこれを可能にします。

例として、ユーザーのリストと、会社別にユーザーをフィルタリングするオプションを含む「ユーザーインデックス」ページを考えてみましょう。ページへの最初のリクエストでは、usersとcompaniesの両方のプロパティがページコンポーネントに渡されます。ただし、同じページへの後続の訪問（おそらくユーザーをフィルタリングするため）では、companiesデータをリクエストせずに、サーバーからusersデータのみをリクエストできます。Inertiaは、サーバーから返された部分的なデータと、クライアント側で既にメモリにあるデータを自動的にマージします。 companies

部分的な再読み込みは、同じページコンポーネントへの訪問に対してのみ機能します。

特定のプロパティのみ

部分的な再読み込みを実行するには、`only`訪問オプションを使用して、サーバーが返すデータを指定します。このオプションは、プロパティのキーに対応するキーの配列である必要があります。

import { router } from '@inertiajs/vue3'

router.visit(url, {
  only: ['users'],
})

特定のプロパティを除く

`only`訪問オプションに加えて、`except`オプションを使用して、サーバーが除外するデータを指定することもできます。このオプションも、プロパティのキーに対応するキーの配列である必要があります。

import { router } from '@inertiajs/vue3'

router.visit(url, {
  except: ['users'],
})

ルーターの省略形

部分的な再読み込みは、ユーザーが既に表示している同じページコンポーネントに対してのみ行うことができるため、現在のURLを自動的に使用するrouter.reload()メソッドを使用するのがほぼ常に理にかなっています。

import { router } from '@inertiajs/vue3'

router.reload({ only: ['users'] })

リンクの使用

onlyプロパティを使用して、Inertiaリンクで部分的な再読み込みを実行することもできます。

import { Link } from '@inertiajs/vue3'

<Link href="/users?active=true" :only="['users']">Show active</Link>

遅延データ評価

部分的な再読み込みを最も効果的にするには、サーバー側のルートまたはコントローラーからプロパティを返すときに、遅延データ評価も使用してください。これは、すべてのオプションのページデータをクロージャでラップすることで実現できます。

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

Inertiaがリクエストを実行すると、必要なデータが判別され、その場合にのみクロージャが評価されます。これは、オプションのデータが多数含まれているページのパフォーマンスを大幅に向上させることができます。

さらに、Inertiaは、onlyオプションを使用して明示的にリクエストされない限り、プロパティを含めないように指定するInertia::lazy()メソッドを提供します。

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

逆に、Inertia::always()メソッドを使用して、部分的な再読み込みで明示的に要求されていない場合でも、プロパティを常に含めるように指定できます。

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

各アプローチの概要は次のとおりです。

return Inertia::render('Users/Index', [
    // ALWAYS included on standard visits
    // OPTIONALLY included on partial reloads
    // ALWAYS evaluated
    'users' => User::all(),

    // ALWAYS included on standard visits
    // OPTIONALLY included on partial reloads
    // ONLY evaluated when needed
    'users' => fn () => User::all(),

    // NEVER included on standard visits
    // OPTIONALLY included on partial reloads
    // ONLY evaluated when needed
    'users' => Inertia::lazy(fn () => User::all()),

    // ALWAYS included on standard visits
    // ALWAYS included on partial reloads
    // ALWAYS evaluated
    'users' => Inertia::always(User::all()),
]);