> ## Documentation Index
> Fetch the complete documentation index at: https://inertiajs.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Partial Reloads

When making visits to the same page you are already on, it's not always necessary to re-fetch all of the page's data from the server. 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. Inertia makes this possible via its "partial reload" 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 page, both the `users` and `companies` props are 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 without requesting 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.

Partial reloads only work for visits made to the same page component.

## Only Certain Props

To perform a partial reload, use the `only` visit option to specify which data the server should return. This option should be an array of keys which correspond to the keys of the props.

<CodeGroup>
  ```js Vue icon="vuejs" theme={null}
  import { router } from "@inertiajs/vue3";

  router.visit(url, {
    only: ["users"],
  });
  ```

  ```js React icon="react" theme={null}
  import { router } from "@inertiajs/react";

  router.visit(url, {
    only: ["users"],
  });
  ```

  ```js Svelte icon="s" theme={null}
  import { router } from "@inertiajs/svelte";

  router.visit(url, {
    only: ["users"],
  });
  ```
</CodeGroup>

## Except Certain Props

In addition to the `only` visit option you can also use the `except` option to specify which data the server should exclude. This option should also be an array of keys which correspond to the keys of the props.

<CodeGroup>
  ```js Vue icon="vuejs" theme={null}
  import { router } from "@inertiajs/vue3";

  router.visit(url, {
    except: ["users"],
  });
  ```

  ```js React icon="react" theme={null}
  import { router } from "@inertiajs/react";

  router.visit(url, {
    except: ["users"],
  });
  ```

  ```js Svelte icon="s" theme={null}
  import { router } from "@inertiajs/svelte";

  router.visit(url, {
    except: ["users"],
  });
  ```
</CodeGroup>

## Router Shorthand

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

<CodeGroup>
  ```js Vue icon="vuejs" theme={null}
  import { router } from "@inertiajs/vue3";

  router.reload({ only: ["users"] });
  ```

  ```js React icon="react" theme={null}
  import { router } from "@inertiajs/react";

  router.reload({ only: ["users"] });
  ```

  ```js Svelte icon="s" theme={null}
  import { router } from "@inertiajs/svelte";

  router.reload({ only: ["users"] });
  ```
</CodeGroup>

## Using Links

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

<CodeGroup>
  ```vue Vue icon="vuejs" theme={null}
  import { Link } from '@inertiajs/vue3'

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

  ```jsx React icon="react" theme={null}
  import { Link } from "@inertiajs/react";

  <Link href="/users?active=true" only={["users"]}>
    Show active
  </Link>;
  ```

  ```svelte Svelte icon="s" theme={null}
  import { inertia, Link } from '@inertiajs/svelte'

  <a href="/users?active=true" use:inertia={{ only: ['users'] }}>Show active</a>

  <Link href="/users?active=true" only={['users']}>Show active</Link>
  ```
</CodeGroup>

## Lazy Data Evaluation

For partial reloads to be most effective, be sure to also use lazy data evaluation when returning props from your server-side routes or controllers. This can be accomplished by wrapping all optional page data in a closure.

```php theme={null}
return Inertia::render('Users/Index', [
    'users' => fn () => User::all(),
    'companies' => fn () => Company::all(),
]);
```

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

Additionally, Inertia provides an `Inertia::optional()` method to specify that a prop should never be included unless explicitly requested using the `only` option:

```php theme={null}
return Inertia::render('Users/Index', [
    'users' => Inertia::optional(fn () => User::all()),
]);
```

On the inverse, you can use the `Inertia::always()` method to specify that a prop should always be included, even if it has not been explicitly required in a partial reload.

```php theme={null}
return Inertia::render('Users/Index', [
    'users' => Inertia::always(User::all()),
]);
```

Here's a summary of each approach:

| Approach                                                                              | Standard Visits | Partial Reloads | Evaluated        |   |
| :------------------------------------------------------------------------------------ | :-------------- | :-------------- | :--------------- | - |
| <span style={{whiteSpace: 'nowrap'}}>`User::all()`</span>                             | Always          | Optionally      | Always           |   |
| <span style={{whiteSpace: 'nowrap'}}>`fn () => User::all()`</span>                    | Always          | Optionally      | Only when needed |   |
| <span style={{whiteSpace: 'nowrap'}}>`Inertia::optional(fn () => User::all())`</span> | Never           | Optionally      | Only when needed |   |
| <span style={{whiteSpace: 'nowrap'}}>`Inertia::always(fn () => User::all())`</span>   | Always          | Always          | Always           |   |

## Preserving Errors

Since the Laravel adapter shares errors using `Inertia::always()`, they are included in every response, even partial reloads where no validation runs. This means an empty error bag from the server will overwrite any existing client-side validation errors. You may use the `preserveErrors` option to keep existing errors when the server doesn't return new ones.

<CodeGroup>
  ```js Vue icon="vuejs" theme={null}
  import { router } from '@inertiajs/vue3'

  router.reload({
      only: ['posts'],
      preserveErrors: true,
  })
  ```

  ```js React icon="react" theme={null}
  import { router } from '@inertiajs/react'

  router.reload({
      only: ['posts'],
      preserveErrors: true,
  })
  ```

  ```js Svelte icon="s" theme={null}
  import { router } from '@inertiajs/svelte'

  router.reload({
      only: ['posts'],
      preserveErrors: true,
  })
  ```
</CodeGroup>

## Combining with Once Props

You may chain the `once()` modifier onto an optional prop to ensure the data is resolved only once and remembered by the client across subsequent navigations.

```php theme={null}
return Inertia::render('Users/Index', [
    'users' => Inertia::optional(fn () => User::all())->once(),
]);
```

For more information on once props, see the [once props](/v3/data-props/once-props) documentation.