Optimizing Inertia.js Requests with the ‘only’ Parameter

When building Laravel applications with Inertia.js and Vue, one common performance concern is the amount of data transferred with AJAX requests. By default, Inertia sends all shared data with every request, which can be unnecessary for many interactions. Let's explore how to optimize this using the only parameter.

The Problem

Consider this typical Laravel application setup:

// app/Http/Middleware/HandleInertiaRequests.php
public function share(Request $request): array
{
    return [
        'auth' => [
            'user' => $request->user(),
            'team' => $request->user()?->currentTeam,
        ],
        'locale' => App::getLocale(),
        'language' => $this->loadLanguageFiles(), // Potentially large!
        'flash' => [
            'message' => session('message'),
        ],
        // ... more shared data
    ];
}

Every time Inertia makes a request, all this data is included in the response. For many AJAX interactions, like paginating a table or filtering results, we don't need this shared data to be resent.

The Solution: Using 'only'

Inertia's only parameter allows you to specify exactly which props you want to receive in the response. Everything else will be preserved from the previous request's state.

Basic Usage

// Simple example
router.get('/users', {
    page: 2,
}, {
    only: ['users']
})

Real-World Example: Data Table

Here's how to implement pagination and filtering with only in a data table:

<script setup>
function applyFilters() {
    router.get(route('users.index'), {
        search: search.value,
        sort: sortColumn.value,
        direction: sortDirection.value,
        per_page: perPage.value,
    }, {
        preserveState: true,
        preserveScroll: true,
        only: ['users', 'filters'] // Only get updated data and filters
    })
}
</script>

<template>
    <!-- Pagination links -->
    <Link 
        :href="users.next_page_url" 
        preserve-scroll
        :only="['users', 'filters']"
    >
        Next
    </Link>
</template>

Note: The only prop in <Link> components serves the same purpose as the only parameter in router.get(), but for link-based navigation.

When you click this link:

1. Inertia intercepts the click
2. Instead of doing a full page load, it makes an AJAX request
3. The only prop tells Inertia to only request specific props ('activities' and 'filters' in this case)
4. All other props from the previous page load are preserved in memory

See the Impact

You can see the effectiveness of this optimization using browser dev tools:

1. Open Chrome DevTools
2. Go to Network tab
3. Filter for XHR/Fetch requests
4. Compare response sizes before and after implementing only

What I'm building

Delegate tasks. Get software.

Give Vroni a GitHub issue, bug report, spec, or rough idea. It reads the repo, plans the change, writes code, runs checks, and works toward a review-ready pull request.

Take a look at vroni.com