inertia v3 is really, really good
Chapters6
Shows how actions like liking a post update the UI instantly using optimistic updates instead of waiting for a server round trip.
Inertia v3 finally brings optimistic UI, instant visits, robust error handling, and a new HTTP hook that replaces Axios for JSON flows.
Summary
Nunomaduro showcases Inertia v3 with a focus on polish and speed. He demonstrates optimistic UI updates that refresh the UI instantly when you click a like button, before the server round-trip completes. He then highlights instant visits, where navigating to a component renders immediately while the backend catches up later. The talk covers loyal props for updating layout props on the fly, and an improved error handling system that cleanly renders 500s, 404s, and other errors without showing broken modals. A new network-error behavior and HTTP hook (use HTTP) let you handle DNS timeouts and JSON responses directly, replacing the old Axios-based approach. Throughout, the emphasis is on a smoother, more resilient user experience with less perceived latency.
Key Takeaways
- Optimistic UI updates in Inertia v3 let you update the UI immediately on actions like 'liking' a post, then perform the server request in the background.
- Instant visits render a component immediately, with the server data filling in once the response arrives, avoiding full backend rendering delays.
- use loyalty props enables dynamic updates to layout props, such as a subtitle in a navigation, without a full page reload.
- Inertia v3 introduces robust server- and network-error handling, including page-specific 500/404 navigations and configurable DNS/time-out responses.
- You can use the new use HTTP hook to perform JSON-enabled requests directly via Inertia, replacing the need for Axios in many cases.
Who Is This For?
Frontend developers using Laravel and Inertia who want lower perceived latency, better error handling, and JSON-capable requests without relying on Axios. Particularly useful for teams migrating from Inertia v2 to v3 or building highly polished single-page-like experiences.
Notable Quotes
""So, if I click on this like bam, it's like instant boom.""
—Demonstrating optimistic UI updates in Inertia v3.
""This is called an instant visit. What do you think in general? Looks good.""
—Explaining instant visits and user experience impact.
""You can reset the layout props if you want to and I think this is really really cool""
—Highlighting loyal props for dynamic layout updates.
""Now you can do one on the back end or on the front end... it just works""
—Describing server- and client-side error handling configuration.
""You can actually have JSON back and do whatever you want""
—Introducing the new use HTTP hook for JSON responses.
Questions This Video Answers
- How does optimistic UI work in Inertia v3 with immediate feedback on actions like liking a post?
- What is an instant visit in Inertia v3 and how does it improve page loads?
- How do loyal props update layout data in Inertia v3 without full page reloads?
- How can I customize error handling (500/404) in Inertia v3?
- What is the use HTTP hook in Inertia v3 and how does it replace Axios for certain requests?
Inertia v3 optimistic UIinstant visitloyal propsserver errorsnetwork errorsuse HTTPuseForm APILaravel Inertia
Full Transcript
guys are not already. Okay, it just feels more Polish. If I click on this like, bam, it's like instant boom. So, if I go here, bam, no backend loyalty out props. This one, I don't know how we survive page you wish to render if there's an error problem. Bam. Like you have actually a page 500. You don't see the [ __ ] model. If use HTTP, you have access to the entire API of of the youth form. What's up everyone? Just a reminder that more than 50% of the people watching this video are not subscribers. So if you enjoy my content, subscribe the channel and now enjoy the video.
I'm going to demo to you guys every single thing coming to Inertia V3. Starting with an optimistic up and this one is actually super exciting. You will get it in a second. So typically as inertia developer like if you have something like this which is literally clicking on the like button like what would you expect using in or even live wire? Uh I think as as a user I want to have like feedback immediately and not a wait on like the the server right for that. But what typically happens is that you would do the round trip right you would click on the like you would wait for the like to be actually performed on your database and then you would see like the love thing.
Now with inertia v3 you can optimistically update the UI. So if I click on this like bam it's like instant. That that's how it should work. It's not always like okay instead of doing a post and simply wait for the props to to become updated uh through the data you basically just call this optimistic hook and you just perform the change on the state and then you do the post which I think is really really handy and the the look and feel of this is actually this was instant which I think is really good fantastic chat let me know what you think by the way I want to hear from you what do you think is just absolutely awesome if it is type w optimistic moving forward instant visits Now this is actually very cool.
Um again on the same process of going to a different page. Mhm. Typically what happens is that you need to pay you need to wait for the page to be rendered on the back end and then be served on the with inertia v3 you can actually visit a component and have it run it like instant. So if I go here bam no backend actual being performed and everything is just really just inst. Now one question that you may have is what h what's happening with the state like because if I go within a component page it is state that needs to be rendered which is not there yet on the list.
Mhm. And the way it works is quite simple. So inertia will kind of render basic information inside and you can actually specify some of that information here. So I want to render this component and on the prop greeting I want to display loading and on the list of items I don't want to display any. Yeah. And the way it works is that you go in, you see like literally nothing and bam, when the response comes back from the server, it just So this is called an instant visit. What do you think in general? Looks good.
Yeah. These two be used all over. All right. Loyal props. This one I don't know how we survive. I think the most clear example is that when you have like a subtitle on your navigation and you are suddenly going to a page and you need to kind of change one of the layout props with information that is on that rendered page and you can just now use use loyalty props and that will basically update the prop on the layout. Kind of obvious and you know I don't think it's mind-blowing feature but we were living without uh so cool stuff you can reset the layout props if you want to and I think this is really really cool as Uh, in terms of code, kind of obvious.
You just type use loyal props, you change the propy, easy peasy lemon squeezy, and we good to go. Moving forward, server errors. Honestly, this one, I think it was just broken on industry v2. And you let me know what you think. Before you would see like a huge like a mode of almost. Ah, yeah. A little bit like in lifeire it happens like that as well. Yeah. Right. So, you need to put in some extra work to make it better. Right. So, that has broken since like forever literally. So now what you can do it is just basically this uh well the the snippet is kind of broken but I hope you guys can see a little.
So now what you need to do is that you can either specify that on the back end or on the front end. So if you want to do one on the back end just type inertia handle exceptions using and then you specify the page you wish to render if there's an error right you can just do it globally really just works and then if you have a problem bam like you have actually a page 500 you don't see the [ __ ] model and also uh same goes with um uh same goes with 404 you have you have actually a page which renders something 403 which renders something previously was just broken man it was just I don't know how people were surviving to this honestly now we have this thing which is really really Cool which is network errors like how for example your website behaves if it is a net probably there is nothing happens you assume it's normal for the user but now you can actually hook into those things and you can just specify the behavior if there is no or if there is no DNS a timeout for so you can hook into those things and specify what the router should do if there is like an error which is very nice it's very nice right you need to do that with like uh what was it called a service worker before I think uh that's what it's called I always find it nice if I'm on a service uh and I travel with train a lot you know okay and uh when like web page or an application just has that amount of polish you know there's like a special page like there's no internet where you can have like a beautiful UI and like a button try again even though it's like trying it again in the browser it just feels more polished I agree you can also display something now oh you don't have internet connection doesn't finally have something to show you on inertia v32 which is use http in the past if you wanted to do a json request inertia.
There was not actually a way of doing it. So you had to use Axios for that. So now you can use the use HTTP hook which allows you to do an inertia HTTP request but you can have JSON back and do whatever you want. Previously if you had JSON in return inertia would display something like you need to return back a page like an actual render. So now you can actually have JSON back and do whatever you want. If I go here into the view page you can use HTTP okay with some state the form which is actually call.
can do a pose and do whatever you want with adjacent resp. Previously to do something like this, you had to play with axios. You couldn't do this with inertia. So this is now available as well on inertia v3. How did we live without all of this? That's actually a very good point, Uncle Dave. That's actually the question I had to Pascal when I saw this. Oh, there's one point though about the use HTTP which is cool is that you have access to the entire API of of the use form. So you can see if the HTTP call is being done.
Yeah. You can see if the state you use is dirty. You can see if it's successful, recently successful or if there is issues. Use HTTP. Good stuff.
More from nunomaduro
Get daily recaps from
nunomaduro
AI-powered summaries delivered to your inbox. Save hours every week while staying fully informed.









