This content originally appeared on DEV Community and was authored by Akram Ghaleb
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 alowpriority, meaning it will be loaded only when explicitly requested. -
topics: This data is deferred with ahighpriority, meaning it will be loaded sooner thancoursesbut 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.
<template>
<div>
<h1>Courses</h1>
<!-- Display deferred courses -->
<Deferred :data="courses">
<template #fallback>
<LoadingSpinner /> <!-- Show a spinner while loading -->
</template>
<template #default>
<CourseCard
v-for="course in courses"
:key="course.id"
:course="course"
/>
</template>
</Deferred>
<!-- Display deferred topics -->
<Deferred :data="topics">
<template #fallback>
<LoadingSpinner /> <!-- Show a spinner while loading -->
</template>
<template #default>
<TopicCard
v-for="topic in topics"
:key="topic.id"
:topic="topic"
/>
</template>
</Deferred>
</div>
</template>
<script>
export default {
props: {
courses: Array,
topics: Array,
},
};
</script>
Explanation:
-
<Deferred>: 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
This content originally appeared on DEV Community and was authored by Akram Ghaleb
Akram Ghaleb | Sciencx (2025-01-15T17:55:42+00:00) A Practical Guide to Deferred Props in Inertia 2. Retrieved from https://www.scien.cx/2025/01/15/a-practical-guide-to-deferred-props-in-inertia-2/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.