Thinkstream

Inertia は、次に訪問される可能性が高いページのデータをプリフェッチすることをサポートしています。
これは、ユーザーが現在のページを操作している間にバックグラウンドでデータを取得できるため、アプリの体感パフォーマンスを向上させるのに役立ちます。

リンクのプリフェッチ

ページのデータをプリフェッチするには、Inertia のリンクコンポーネントに prefetch プロパティを追加します。デフォルトでは、ユーザーがリンクに 75ms 以上ホバーすると、Inertia はそのページのデータをプリフェッチします。このホバー遅延は、アプリケーションのデフォルト設定の prefetch.hoverDelay オプションでカスタマイズできます。

デフォルトでは、データは 30 秒間キャッシュされ、その後破棄されます。このデフォルト値は、アプリケーションのデフォルト設定の prefetch.cacheFor オプションでカスタマイズできます。
また、Link コンポーネントに cacheFor プロパティを渡すことで、リンクごとにキャッシュ時間をカスタマイズすることもできます。

ホバー時ではなく、mousedown 時にプリフェッチを開始することもできます。その場合は、prefetch プロパティに click を指定します。

ユーザーが次にそのページを訪問すると確信できる場合は、マウント時にデータをプリフェッチすることもできます。

prefetch プロパティに配列を渡すことで、複数のプリフェッチ戦略を組み合わせることもできます。

プログラムによるプリフェッチ

router.prefetch を使用して、プログラム的にデータをプリフェッチできます。このメソッドのシグネチャは router.visit と同じですが、3 番目の引数でプリフェッチオプションを指定できる点が異なります。

cacheFor オプションを指定しない場合、デフォルトで 30 秒になります。

router.prefetch(
    '/users',
    { method: 'get', data: { page: 2 } },
)

router.prefetch(
    '/users',
    { method: 'get', data: { page: 2 } },
    { cacheFor: '1m' },
)

Inertia は、現在のページのプリフェッチ状態を追跡できる usePrefetch フックも提供しています。このフックは、現在プリフェッチ中かどうか、プリフェッチ済みかどうか、最後に更新された時刻、そして現在のページのみのキャッシュをフラッシュする flush メソッドを返します。

同じ URL でも異なるリクエスト構成を区別する必要がある場合は、visit オプションを渡すこともできます。

キャッシュタグ

キャッシュタグを使用すると、関連するプリフェッチデータをグループ化し、特定のイベントが発生した際にそのタグを持つすべてのキャッシュデータを無効化できます。

キャッシュされたデータにタグを付けるには、Link コンポーネントに cacheTags プロパティを渡します。

プログラムによるプリフェッチでは、router.prefetch の第 3 引数に cacheTags を渡します。

router.prefetch('/users', {}, { cacheTags: 'users' })
router.prefetch('/dashboard', {}, { cacheTags: ['dashboard', 'stats'] })

キャッシュの無効化

router.flushAll を呼び出すことで、すべてのキャッシュデータを削除できます。また、router.flush を使用すると、特定のページのキャッシュのみを削除できます。

// すべてのプリフェッチキャッシュをフラッシュ
router.flushAll()

// 特定のページのキャッシュをフラッシュ
router.flush('/users', { method: 'get', data: { page: 2 } })

// usePrefetch フックを使用
const { flush } = usePrefetch()

// 現在のページのキャッシュをフラッシュ
flush()

より細かい制御が必要な場合は、router.flushByCacheTags を使用してタグ単位でキャッシュをフラッシュできます。これは、指定されたタグの いずれか を含むキャッシュレスポンスをすべて削除します。

// 'users' タグが付いたすべてのレスポンスをフラッシュ
router.flushByCacheTags('users')

// 'dashboard' または 'stats' タグが付いたすべてのレスポンスをフラッシュ
router.flushByCacheTags(['dashboard', 'stats'])

自動キャッシュフラッシュ

デフォルトでは、Inertia は新しいページへ遷移した際にプリフェッチキャッシュを自動的にフラッシュしません。キャッシュされたデータは、キャッシュ期間が切れたときのみ破棄されます。すべての遷移時にキャッシュをフラッシュしたい場合は、イベントリスナーを設定できます。

リクエスト時の無効化

リクエストを行う際に自動的にキャッシュを無効化するには、Form コンポーネントに invalidateCacheTags プロパティを渡します。指定されたタグは、フォーム送信が成功したときにフラッシュされます。

useForm ヘルパーを使用する場合は、visit オプションに invalidateCacheTags を含めることができます。

プログラムによる visit でも、オプションに invalidateCacheTags を含めることでキャッシュタグを無効化できます。

router.delete(`/users/${userId}`, {}, {
    invalidateCacheTags: ['users', 'dashboard']
})

router.post('/posts', postData, {
    invalidateCacheTags: ['posts', 'recent-posts']
})

ステイル・ホワイル・リバリデート（Stale While Revalidate）

デフォルトでは、キャッシュされたデータがキャッシュ期間より古い場合、ユーザーがページを訪問すると Inertia は新しいデータを取得します。この挙動は、cacheFor プロパティにタプルを渡すことでカスタマイズできます。

配列の最初の値はキャッシュが新鮮と見なされる秒数を表し、2 番目の値は、サーバーからデータを取得する必要が出るまで、古いデータとして提供できる期間を定義します。

最初の値より前（フレッシュ期間内）にリクエストが行われた場合、サーバーへのリクエストは行われず、キャッシュが即座に返されます。

2 つの値の間（ステイル期間）にリクエストが行われた場合、古い値がユーザーに提供され、同時にバックグラウンドでキャッシュを更新するためのリクエストが送信されます。新しいデータが返ると、それがページにマージされ、ユーザーは最新のデータを確認できます。

2 番目の値を過ぎてからリクエストが行われた場合、キャッシュは期限切れと見なされ、通常のリクエストとしてページとデータがサーバーから取得されます。