New in Inertia
Playing
03. Deferred Props

Episodes

0%
Your progress
  • Total: 1h 27m
  • Played: 0m
  • Remaining: 1h 27m
Join or sign in to track your progress

Transcript

00:00
The new deferred props feature of inertia allows you to delay the loading and rendering of any of
00:06
the props that you're passing down to your page components until after the initial page load. This is going to speed up the way that your application feels because you're getting that initial fast response and then you're going ahead and loading data. Now this is possible with inertia v1 in fact the code that you see here is using inertia v1 so let's go ahead and look at
00:29
how we would do this previously and then let's jump over to v2 and see how deferred props specifically helps clear this up. Okay so I'm going to go ahead and pass down a bunch of users in here and let's go ahead and just do this in the standard way first of all so let's just say user and get. Okay so I'm going to go ahead and just see the database with a bunch of users so let's
00:53
say user factory and let's grab 100 users and let's go ahead and create them out. Great okay so over to our dashboard let's go ahead and pull these in so let's define out our props in here and we will pull them users in as an array of data and let's just dump them on the page down here somewhere. Okay so if we head over sure enough we've got a bunch of users here and of course if
01:20
we take a look at our network tab we don't have an additional request for these. These are all being loaded on the initial page load so we don't have a slow request here but we could speed this up by rendering the page first and then loading and rendering out the users. How do we do that with inertia v1? Well let's take a look so we would go ahead and use something like inertia lazy
01:44
so we could say inertia lazy we could create out a callback in here and then we could go ahead and return this data like this. Now I'm going to go ahead and specifically add a sleep in here just to simulate a slightly slower request and by the way in inertia v2 the lazy method here has been deprecated so if you are trying to use lazy in inertia v2 it should work but this is now changed
02:11
to optional. Now it's not going to work here because I'm working on inertia v1 but it's just something worth mentioning. Okay so if we go ahead and refresh here you can see that we don't get any data. Our job now is to manually load this data in with a partial reload with inertia's router. So how do we do that? Well in v1 what we would do is probably on an unmounted hook within view
02:33
go ahead and use inertia's router which we would need to pull in as well so let's make sure we import that from inertia view 3 and then we would do a reload here and we would choose the data that we want to load in so that would be the user's prop. So now what's going to happen is when we refresh the page we get a second delay we get a really fast initial page load here and then the
02:56
data starts to roll in. So this has been a really good way to just speed up your apps but it's a little bit cumbersome it's a little bit clunky to have to do this so let's take a look at the third props. So I'm going to go ahead and just upgrade this application so let's do an npm install on inertia v3 next and let's do the same thing for composer and requiring inertia v2. Okay so this
03:22
functionality will still work you can see that it works in exactly the same way there's nothing wrong with doing it this way but let's take a look at how we specifically use deferred props. So I'm going to get rid of this unmounted hook we're not going to need that anymore we're also not specifically going to need the router because we're not needing to manually do this anymore.
03:40
Over in web this is going to change you can see that this is being deprecated let's go over and change this to defer okay and have a look at what happens so let's go over and give this page a refresh and you can see that we pretty much get the same functionality as lazy or optional but by using defer this is going to let inertia know that we can now use this with the new defer
04:04
component and really the defer component acts like a wrapper for the functionality that we've just done and that we would have to usually do in v1. So let's take a look at what this looks like so the first thing that we're going to do is come over and pull in the deferred component from inertia js view 3 and then somewhere in our page wrapping this data we're going to go ahead and
04:25
pull in that deferred component and use that deferred component and we can reference it like this or like this it doesn't really matter let's go ahead and dump out the users and see what happens so if we head over to the browser you can see this isn't working at the moment we need to pass a couple of options through to this to get this working the first thing that we need is a
04:44
data prop this tells us which of the props that we have deferred and what we want to pull in within this component we know that that is users let's go back over and give this a refresh and you can see that deferred requires a template fallback slot this is going to be the state or what is rendered within here if this content is currently in the process of being loaded so let's go ahead
05:08
and define out a template inside of here and let's give the fallback name to this and then in here we can do anything like loading or you could show a spinner whatever you wanted to do now otherwise down here this is going to be the prop data that we would usually display on the page so this will be empty initially but then of course it will kick in once this data has been loaded so let's go back
05:33
over and give that a refresh and you can see we sure enough we get that fallback loading and then this data rolls in so pretty much what has happened here and the difference between v1 and v2 is that rather than have to build this functionality ourselves and do a manual router reload this has gone ahead and wrapped this in a component which makes it super easy to use
05:57
and the thing I love about this is that the fallback template here means that we don't have to define out up here any things like this so we don't have to do something like is loading and create a ref out and pollute our script section with these booleans which detect whether something's loading or not and then if we were to do a router reload here if we were doing this
06:20
and only pulling in users what we would normally then have to do is say on start we're going to set is loading to true and then on finish we're going to set is loading to false it just cleans all of this stuff up and wraps this in a nice component for us okay so we've looked at one piece of data but what if we have multiple props that we want to load in let's just take a look at how
06:45
this works so I'm going to go ahead and just copy this down so I'm just going to give this a entirely different name so let's say more users just as an example and then let's just add one more in here since we're not working with any other models so let's say even more users okay so if we want to go ahead and load all of these in within this deferred component what do we do so we've got
07:09
users in here let's just take a look at what the request looks like so we're going to wait that's going to take about three seconds now because we've got three pieces of data and if we just take a look at the network tab under fetch xhr you can see that the props that have been loaded are all of these now what's actually happened here is all of these have been loaded in one go so the request
07:32
has taken three seconds because we've got a one second delay a simulated delay for each of these items now what happens if we want these to be loaded in parallel so let's go over to our web routes again we can actually give these a key or a name so as the third argument or the second argument to defer we can give this a specific key so let's just call this one let's call this one
07:58
and you can give these any string name you want it doesn't matter what you add these in and let's add this as two so what's now going to happen is these two are going to be grouped together in one request and this one is just going to be grouped together in one request so they're just unique keys that tell inertia how to load these you can see now we've ended up with two requests one that
08:19
took one second because we've got one request with one name that has a one second delay and this one with two seconds and you can see if you look at the props here we've got that even more users and then in here the props that are being loaded are them too so this is really helpful rather than having a huge delay to wait for all of the props that you've deferred to be loaded you can group
08:39
these together depending on the priority of them or how slow you expect them to be so in here we can do exactly the same thing it's a little bit difficult to see at the moment because we're just dumping these together but what we can do in here is we can add in a array instead so we can go ahead and specify that we want users more users and then we could create a separate deferred prop
09:03
if we wanted to or deferred component to deal with even more users so we could add that into an array still if we wanted to so even more users and let's dump out even more users down here and let's dump our users and more users in here so we still need to add these to our defined props so let's say more users and that's going to be an array and the same for even more users okay let's
09:35
go ahead and give this a refresh we get two loading things the first bunch here gets loaded in and then the second bunch gets loaded in as well so it really depends on what kind of data you are working with how slow each of these you expect them to be and of course how you are designing out whatever you are deferring

Episode summary

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!

Episode discussion

No comments, yet. Be the first!