Beyond usePoll: Mastering Deferred Props and Rescue Slots in Inertia 3.x

Building modern apps with a php web framework often feels like a balancing act. You want a fast initial page load. You also want rich, data-heavy dashboards. In the past, heavy database queries meant a long wait for the user or complex manual polling logic.

Inertia 3.x changes the game. It introduces Deferred Props and Rescue Slots. These tools let you ship the "shell" of your page instantly. The heavy data follows when it is ready. It is the end of the full-page loading spinner.

The Bottleneck Problem

Imagine a dashboard. You have a list of users. You also have a complex report that takes three seconds to calculate.

Traditionally, your mvc framework php controller would wait for both. The user sees a white screen for three seconds. This is bad UX. You could use usePoll, but that is for data that changes frequently. For initial data, you need something better.

Laravel provides the perfect foundation for this. With php dependency injection and clean services, we can isolate these heavy tasks. Now, we can also defer them at the framework level.

The Server-side: Inertia::defer

The journey starts in your Laravel controller. Instead of returning raw data, you wrap expensive props in the defer method.

public function index()
{
    return Inertia::render('Dashboard', [
        'stats' => Inertia::defer(fn () => Analytics::getMonthlyGrowth()),
        'notifications' => Notification::latest()->take(5)->get(),
    ]);
}

In this example, notifications are sent immediately. The stats prop is deferred. Inertia sends the initial HTML without the stats. Once the browser renders the page, Inertia makes a background request to fetch the missing data.

This approach utilizes php artisan commands and background processes effectively. It ensures your application remains responsive. You are essentially building an "island" of interactivity without the complexity of a manual build rest api with php approach.

The Frontend: The <Deferred> Component

On the Vue side, handling this is remarkably simple. Inertia 3.x provides the <Deferred> component. It manages the lifecycle of your deferred props automatically.

<template>
  <Deferred data="stats">
    <template #fallback>
      <div class="skeleton-loader">Loading stats...</div>
    </template>

    <template #default="{ stats }">
      <StatsChart :data="stats" />
    </template>
  </Deferred>
</template>

The #fallback slot displays immediately. It stays until the data arrives. This is progressive rendering. It makes your app feel significantly faster.

Handling the Edge Cases: Rescue Slots

What if the background request fails? Perhaps a third-party API is down. You don't want the loading state to spin forever.

This is where the #rescue slot shines. It acts as a safety net for your background data.

<template>
  <Deferred data="stats">
    <template #fallback>
      <p>Fetching your data...</p>
    </template>

    <template #default="{ stats }">
      <DataGrid :items="stats" />
    </template>

    <template #rescue="{ error, retry }">
      <div class="error-box">
        <p>Something went wrong: {{ error }}</p>
        <button @click="retry">Try Again</button>
      </div>
    </template>
  </Deferred>
</template>

The #rescue slot gives you access to the error message and a retry function. This level of control is why Laravel is considered a top-tier php framework. It handles the "happy path" and the "sad path" with equal elegance.

Beyond Initial Load: The reloading Prop

Sometimes you want to refresh deferred data without showing the skeleton loader again. Inertia provides a reloading prop within the default slot.

You can use this to show a subtle progress bar or dim the current data. This prevents layout shifts. Users hate when elements jump around. Keeping the old data visible while fetching the new data creates a much smoother experience.

This pattern works beautifully with laravel blade templating when you are transitioning between full-stack and SPA paradigms.

Real-World Comparison

Why bother with this? Look at the difference.

In a traditional setup, every page transition feels heavy. You wait for the slowest query. With deferred props, you wait for the fastest query.

This is essential for complex tools. Think about database migrations php management interfaces or php authentication logs. These often involve large datasets. Deferring them keeps the administrative experience snappy.

Best Practices for UX

1. Use Skeletons, Not Spinners: A skeleton loader mimics the shape of the content. It reduces visual noise.
2. Group Small Queries: If you have five tiny queries, don't defer them all individually. Send them in the initial response.
3. Prioritize the Critical Path: Defer everything that isn't required for the user to understand what page they are on.
4. Leverage Caching: Even deferred queries should be fast. Use Laravel's Cache inside your deferred callbacks.

Conclusion

Inertia 3.x moves us closer to the "seamless web." By mastering deferred props and rescue slots, you remove the biggest bottleneck in SPA development: waiting for the server.

You are no longer limited by the slowest part of your page. You can build rich, interactive dashboards that feel like native apps. The tools are there. The syntax is elegant. The results are joyful.

We would love to hear how you are using these new features. Are you using them for analytics? Or maybe for complex search results? Every corner of the community is finding new ways to ship faster.

Your next high-performance app starts with a simple Inertia::defer(). Happy coding.