In this episode, we're diving into the new deferred props feature in Inertia, which lets you speed up your apps by loading certain props only after the initial page load. We start by looking at how we used to handle this in Inertia v1, using the inertia-lazy
method, and manually triggering data loads with router reloads—pretty effective, but honestly, a bit clunky and verbose.
Then, we upgrade to Inertia v2 (and v3 for the JS side), and check out how the new defer
method and the <Deferred>
component make this so much easier. Instead of juggling hooks and router calls, we just mark props as deferred and wrap their output in the <Deferred>
component. You get a fast initial page, and then data like users or other heavy datasets load in after, complete with an easy fallback template for loading states—no more messy isLoading
refs everywhere.
We also explore how to handle multiple deferred props—either bundling them together for a single request, or grouping them selectively so that some props load independently. This flexibility helps you optimize for both speed and the user's experience, especially when dealing with big, slow props. By the end of this session, you'll have a much cleaner way to deal with deferred props using Inertia's latest features!