Inertia 3.x Deep Dive: Polling, Deferred Props, and Standalone HTTP with Laravel & Vue

Inertia.js has evolved beyond a simple bridge. The latest 3.x release transforms how we handle asynchronous data and background updates in the Laravel ecosystem. It moves the php web framework closer to the "single-page app" experience without the complexity of a separate API layer.

This version introduces primitives that handle common UI patterns natively. You no longer need to reach for Axios or manual setInterval logic to keep your interface fresh.

The Standalone Hook: useHttp

Historically, Inertia focused on page visits. Every request was a navigation. While powerful, this created friction for small, localized updates like search suggestions or dashboard widgets.

The new useHttp hook changes that. It is a standalone HTTP client built on Inertia's internal XHR engine. It allows you to fire requests that do not trigger a page visit.

<script setup>
import { useHttp } from '@inertiajs/vue3'

const search = useHttp()

const performSearch = (query) => {
  search.get('/api/search', { params: { query } })
}
</script>

useHttp provides the same reactive state you expect from useForm. You get processing, errors, and progress out of the box. This makes it the primary tool for php developer tools that require granular UI control without changing the URL.

Smart Polling: usePoll and Timing Modes

Keeping data fresh usually requires manual lifecycle management. You start a timer on mount and clear it on unmount. Inertia 3.x automates this with usePoll.

usePoll does more than just repeat a request. It introduces three distinct modes to handle network concurrency:

• Overlap: The default behavior. Every tick fires a new request regardless of the previous one's status.
• Cancel: If a previous poll is still in flight when the next tick occurs, the old request is aborted.
• Rest: The interval only starts after the previous request finishes. This ensures sequential execution and prevents server dog-piling.

These modes give you precise control over background traffic. Use rest for expensive database queries and cancel for high-frequency updates where only the latest data matters.

Deferred Props: Speed to First Paint

Heavy data sets often slow down initial page loads. In a standard mvc framework php setup, the user waits for the slowest query to finish before seeing anything.

Deferred props solve this by sending a "placeholder" first. The page renders immediately, and Inertia fetches the heavy data in the background.

On the server, you mark a prop as deferred:

return Inertia::render('Dashboard', [
    'stats' => Inertia::defer(fn () => calculateStats(), rescue: true),
]);

In your Vue component, the <Deferred> component handles the lifecycle. It provides three slots: #fallback, #default, and #rescue.

The Rescue Slot and Reloading Indicators

The rescue slot is a major addition for reliability. If a deferred prop fails to resolve on the server, the rescue slot renders instead of crashing the page.

<Deferred data="stats">
  <template #fallback>
    <SkeletonLoader />
  </template>

  <template #default="{ reloading }">
    <StatGrid :data="stats" :class="{ 'opacity-50': reloading }" />
  </template>

  <template #rescue="{ reloading }">
    <ErrorMessage @retry="reload" :loading="reloading" />
  </template>
</Deferred>

The reloading prop allows you to show subtle update indicators. Users see the existing data while the new data is being fetched, preventing jarring layout shifts.

Standalone HTTP vs. Router

Deciding between the Inertia router and useHttp is now a matter of intent.

Use the Router for full-page transitions where the URL should change. Use useHttp for side-effects, background actions, and isolated widgets. This separation keeps your browser history clean and your application logic predictable.

First-Class SSR with Vite

Server-Side Rendering (SSR) is no longer a secondary concern. Inertia 3.x integrates deeply with Vite to make SSR work automatically in development.

The new pipeline fixes Flash of Unstyled Content (FOUC) and simplifies hydration. When a page is rendered on the server, Vue hydates the static HTML into a fully interactive application seamlessly. This improves both SEO and perceived performance, making it a vital part of the php framework experience.

Building the Next Wave

Inertia 3.x simplifies the mental model of full-stack development. It provides the tools to build complex, reactive interfaces while staying within the comfort of a single Laravel project.

These features: polling, deferred props, and standalone HTTP: are not just helpers. They are the building blocks for a more responsive web. We encourage you to dig into these tools in your next project.

We would love to see how you are using these new patterns in your own applications.