Reducing Server Load with Inertia.js Partial Reloads

The Cost of Full Page State

In a standard Inertia.js application, every visit or reload typically sends the entire page state from the server to the client. While this simplifies development by keeping the frontend and backend in sync, it creates a performance bottleneck as your pages grow. If a page contains a heavy reporting table, a user profile, and a simple notification count, updating just the notification count normally triggers the expensive reporting query again.

The solution is Partial Reloads. This feature allows the client to request only a specific subset of the page data, preventing the server from executing unnecessary database queries and reducing the size of the JSON payload.

How Partial Reloads Work

Partial reloads shift the responsibility of data filtering to the server. When a client makes a request with the only property, Inertia adds a specific query parameter to the URL. The server-side adapter then detects this parameter and only includes the requested keys in the response.

Crucially, simply requesting a partial reload on the frontend does not automatically stop the server from running the queries. You must wrap your controller logic in conditional checks to ensure the database isn't hit for data that won't be sent.

Implementing Conditional Data Fetching

To make partial reloads effective, use the Inertia::lazy() method (in Laravel) or a manual check of the request parameters. This ensures that expensive operations are only performed when the data is actually needed for the initial load or specifically requested during a reload.

Worked Example: User Dashboard

Imagine a dashboard with a lightweight user profile and a heavy analytics dataset. We want to refresh the analytics without re-fetching the profile.

Server-Side (Laravel Controller):

public function index(Request $request)
{
    return Inertia::render('Dashboard', [
        'user' => Auth::user(),
        // Only execute this query if 'analytics' is requested or it's a full page load
        'analytics' => Inertia::lazy(fn () => AnalyticsService::getHeavyReport()),
    ]);
}

Client-Side (Vue.js):

To trigger the reload for only the analytics data, use the only option in the router.reload method:

import { router } from '@inertiajs/vue3'

const refreshAnalytics = () => {
    router.reload({
        only: ['analytics'],
        onSuccess: () => console.log('Analytics updated without reloading user profile'),
    });
};

Verification and Diagnostics

To verify that partial reloads are working as intended, follow these steps:

• Network Inspection: Open Browser DevTools > Network tab. Trigger the reload. The response JSON should contain only the analytics key and the props wrapper, omitting the user object.
• Query Logging: Enable your database query log (e.g., DB::listen in Laravel). A full page load will show all queries; a partial reload should only show the queries associated with the analytics key.

Trade-offs and Limitations

Constraint	Impact	Workaround
Hard Refreshes	Browser F5/Refresh always triggers a full state load.	Accept as standard browser behavior.
State Fragmentation	Updating only one piece of data can lead to inconsistent UI if dependencies exist.	Include all related data keys in the only array.
Controller Logic	Requires explicit lazy() or conditional wrapping.	Standardize data fetching patterns across controllers.

Closing Action

Audit your most visited pages for "heavy" data keys that rarely change. Wrap those keys in Inertia::lazy() and implement router.reload({ only: [...] }) for specific UI interactions. This small change reduces server CPU usage and improves the perceived snappiness of your application.