Partial reloads

When making visits to the same page, it's not always necessary to fetch all of the data required for that page from the server again. In fact, selecting only a subset of the data can be a helpful performance optimization if it's acceptable that some page data becomes stale. This is possible to do in Inertia with the "partial reloads" feature.

As an example, consider a user index page that includes a list of users, as well as an option to filter the users by their company. On the first request to the user index page both the users and companies data is passed to the page component. However, on subsequent visits to the same page (maybe to filter the users), you can request only the users data from the server, and not the companies data. Inertia will then automatically merge the partial data returned from the server with the data it already has in memory client-side.

Making partial visits

To perform a partial reload, use the only property to set which data you want returned from the server. This takes an array of keys, which corresponds to the keys of the props.

import { Inertia } from '@inertiajs/inertia'

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

Since partial reloads can only be made to the same page component, it almost always makes sense to just use the Inertia.reload() method, which automatically uses the current URL.

import { Inertia } from '@inertiajs/inertia'

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

It's also possible to perform partial reloads with Inertia links using the only property.

import { Link } from '@inertiajs/inertia-vue3'

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

Lazy data evaluation

For partial reloads to be most effective, be sure to also use lazy data evaluation server-side. This is done by wrapping all optional page data in a closure.

When Inertia performs a visit, it will determine which data is required, and only then will it evaluate the closure. This can significantly increase the performance of pages with a lot of optional data.

return Inertia::render('Users/Index', [

    // ALWAYS included on first visit
    // OPTIONALLY included on partial reloads
    // ALWAYS evaluated
    'users' => User::get(),

    // ALWAYS included on first visit
    // OPTIONALLY included on partial reloads
    // ONLY evaluated when needed
    'users' => fn () => User::get(),

    // NEVER included on first visit
    // OPTIONALLY included on partial reloads
    // ONLY evaluated when needed
    'users' => Inertia::lazy(fn () => User::get()),
]);