Use Inertia.js Partial Reloads to Cut Bandwidth: The 'only' Prop Explained

Problem – Full‑Page Reloads Are Still the Default

When a user navigates within an Inertia.js app, the client normally sends a request and the server returns a full page JSON payload. Even if only a small sidebar changes, the entire page is re‑rendered, consuming bandwidth and causing a brief visual flash.

Thesis – The ‘only’ Prop Lets You Ask for Just What You Need

The only option on Inertia.visit sends an X‑Inertia‑Partial‑Component header. The server can then return a JSON object that contains only the requested component’s props, letting the client replace just that part of the page while preserving state in everything else.

Partial Reloads in Action – Client Side

Below is a minimal Vue 3 example. The page has two components: Sidebar and MainContent. The sidebar shows a timestamp that should refresh on demand.

// In a Vue component or router hook
import { Inertia } from '@inertiajs/inertia';

function refreshSidebar() {
  Inertia.visit('/dashboard', {
    only: ['sidebar'], // request only the sidebar component
    // preserve state for everything else
  });
}

When refreshSidebar runs, Inertia sends a GET request to /dashboard with the header: X-Inertia-Partial-Component: sidebar.

Server‑Side Handling – Laravel Example

In Laravel, the controller can simply return the same Inertia view. Inertia’s adapter automatically checks for the partial header and trims the response.

use Inertia\Inertia;

public function dashboard(Request $request)
{
    $sidebarProps = [
        'lastUpdated' => now()->toIso8601String(),
    ];

    $mainProps = [
        'content' => 'Welcome to the dashboard',
    ];

    return Inertia::render('Dashboard', [
        'sidebar' => $sidebarProps,
        'main' => $mainProps,
    ]);
}

Because the request includes X-Inertia-Partial-Component: sidebar, Inertia will send back a JSON payload that looks like:

{
  "props": {
    "sidebar": {
      "lastUpdated": "2026-10-11T21:30:00Z"
    }
  }
}

The main component is omitted, so the client only updates the Sidebar component and keeps the existing state of MainContent.

How to Verify the Partial Reload Works

1. Inspect the Request – In Chrome DevTools, check that the network request to /dashboard includes the header X-Inertia-Partial-Component: sidebar.
2. Check the Response – The JSON payload should contain only the sidebar key under props.
3. Verify the DOM – After the visit, the element rendered by <Sidebar> should show a new timestamp, while the <MainContent> element remains unchanged.

These steps confirm that a true partial update occurred.

Trade‑offs & Limitations

• Component Name Accuracy – The string in only must match the component’s name exactly. Renaming a component without updating the list will silently fail to update.
• Server Support Required – The server must honor the X-Inertia-Partial-Component header. If it returns a full page, the client will perform a full reload anyway.
• Initial Load Still Full – The first page load is always a full render; partial reloads only apply to subsequent navigations.
• Complexity in Large Apps – Tracking which components need partial updates can add maintenance overhead, especially when components are deeply nested.

Takeaway – When to Use Partial Reloads

Use the only prop when:

• A small, frequently updated component (e.g., a live clock, notification badge, or user status) sits alongside a larger, rarely changing layout.
• You want to preserve user input or scroll position in unaffected components.
• Bandwidth or perceived speed is a concern on mobile or low‑latency environments.

To get started, add only to your Inertia.visit calls, ensure component names are stable, and verify with DevTools that the partial header is sent and the JSON payload is trimmed. If you encounter unexpected full reloads, double‑check that the server is configured to respect the header and that component names match exactly.