A Practical Guide to Deferred Props in Inertia 2

Inertia 2 introduced a powerful feature called Deferred Props, which allows you to delay the loading of non-critical data until it’s needed. This can significantly improve the performance of your application by reducing the initial payload size and speeding up page load times. In this guide, we’ll explore how to use Deferred Props with practical examples. What Are Deferred Props? Deferred Props allow you to prioritize critical data and defer non-critical data, loading it only when explicitly requested. This is particularly useful for: Improving initial page load times: By reducing the amount of data sent upfront, your application loads faster. Optimizing performance: Deferring non-essential data reduces the payload size and improves overall performance. Simplifying code: You can avoid cluttering your components with unnecessary data fetching logic. Example 1: Deferring Data in the Backend Let’s start with a backend example. Suppose you have a /courses route where you want to display a list of courses and related topics. However, fetching all the data at once might slow down the initial page load. With Deferred Props, you can prioritize critical data and defer non-critical data. Here’s how you can implement this in your controller: use Inertia\Inertia; use Inertia\Deferred; use App\Models\Course; use App\Models\Topic; class CourseController extends Controller { public function index() { return Inertia::render('Courses/Index', [ 'courses' => new Deferred(function () { sleep(5); // Simulate a slow query return Course::all(); }, 'low'), // Low priority 'topics' => new Deferred(function () { sleep(2); // Simulate a faster query return Topic::all(); }, 'high'), // High priority ]); } } Explanation: courses: This data is deferred with a low priority, meaning it will be loaded only when explicitly requested. topics: This data is deferred with a high priority, meaning it will be loaded sooner than courses but still after the critical data. Example 2: Handling Deferred Props in the Frontend Now that we’ve deferred the data in the backend, let’s see how to handle it in the frontend. In this example, we’ll use Vue.js to display the deferred topics data and courses data in the frontend. Courses export default { props: { courses: Array, topics: Array, }, }; Explanation: : This component is used to handle deferred data. It automatically fetches the data when needed. #fallback: This slot is used to display a loading spinner (or any fallback UI) while the data is being fetched. #default: This slot is used to render the actual data once it’s loaded. Benefits of Using Deferred Props Improved Performance: By deferring non-critical data, you reduce the initial payload size, resulting in faster page loads. Better User Experience: Users see the most important content first, while non-critical data is loaded in the background. Efficient Resource Usage: Only load data when it’s needed, reducing unnecessary server load and bandwidth usage. Conclusion Deferred Props in Inertia 2 are a game-changer for optimizing the performance of your applications. By deferring non-critical data, you can ensure that your app loads quickly and efficiently, providing a better experience for your users. The examples above demonstrate how to implement Deferred Props in both the backend and frontend. Give it a try in your next project and see the difference it makes! Resources Inertia.js Documentation Laracast Video

use Inertia\Inertia;
use Inertia\Deferred;
use App\Models\Course;
use App\Models\Topic;

class CourseController extends Controller
{
    public function index()
    {
        return Inertia::render('Courses/Index', [
            'courses' => new Deferred(function () {
                sleep(5); // Simulate a slow query
                return Course::all();
            }, 'low'), // Low priority

            'topics' => new Deferred(function () {
                sleep(2); // Simulate a faster query
                return Topic::all();
            }, 'high'), // High priority
        ]);
    }
}

<template>
  

    
Courses

    
     :data="courses">
       #fallback>
         /> 
      template>

      <template #default>
        
          v-for="course in courses"
          :key="course.id"
          :course="course"
        />
      template>
    

    
     :data="topics">
      <template #fallback>
         /> 
      template>

      <template #default>
        
          v-for="topic in topics"
          :key="topic.id"
          :topic="topic"
        />
      template>
    
  


<script>
export default {
  props: {
    courses: Array,
    topics: Array,
  },
};
script>

Related Posts

Using SVGs on Canvas with Compose Multiplatform

Jan 15, 2025

Spring reactive Mono.fromCallable vs Mono.justOrEmpty

Jan 15, 2025

Why Do We Use Calendars? A Short Essay About Time

Jan 14, 2025