Skip to content
Programing

Inertia.js v3.0: Optimistic Updates and the New Native XHR Client

Published: Duration: 5:11
0:00 0:00

Transcript

Host: Alex Chan Hey everyone, welcome back to Allur, the show where we break down the latest shifts in PHP, Laravel, Go, and the mobile world. I’m your host, Alex Chan. Host: Alex Chan Joining me is Marcus Thorne. Marcus is a Lead Full-Stack Developer at NexaStream and a long-time contributor to the Laravel community. He’s been beta-testing v3.0 on some high-traffic production apps, so he’s seen exactly where the rubber meets the road. Marcus, it’s so good to have you on Allur! Guest: Marcus Thorne Thanks, Alex! It’s great to be here. Yeah, I’ve been living and breathing Inertia since the early 0.x days, so seeing version 3.0 come out... it’s actually kind of an emotional moment for us "monolith" fans, if you can believe that! Host: Alex Chan Oh, I totally believe it. We get attached to our tools! So, let's jump straight into the big shocker. The Inertia team, led by Jonathan Reinink, decided to kick Axios to the curb. They’ve replaced it with a custom, native XHR client. When I first read that, I was like, "Wait, why?" Axios is the industry standard. Why rebuild the wheel? Guest: Marcus Thorne Right? That was my first reaction too. Like, "Oh great, another custom thing to learn." But once you dig into it, it makes so much sense. Axios is amazing, but it’s a general-purpose tool. It’s designed to work for everyone, everywhere. Inertia has very specific needs—it needs to talk to Laravel using specific headers like `X-Inertia`, it has to handle CSRF tokens in a certain way, and it has to manage its own internal request lifecycle. Host: Alex Chan That makes sense. It’s like tailoring a suit versus buying one off the rack. But does that mean we lose the "good stuff" from Axios? Like, I use upload progress bars all the time. Did that get axed? Guest: Marcus Thorne Actually, no! That’s the cool part. They’ve kept functional parity. So you still get your progress events, you still get request cancellation. It just feels... snappier? It’s hard to describe until you see the network tab, but it feels more "wired in" to the framework. Host: Alex Chan Interesting. Okay, so moving from the "under the hood" stuff to something much more visible: Optimistic UI. This is the big one for me. Before v3.0, if I wanted a "Like" button to update instantly before the server responded, I had to manually update my local state, then handle the error if it failed... it was a lot of boilerplate. How does v3.0 change that? Guest: Marcus Thorne Oh man, this is the "aha" moment for most people. Before, you were basically faking it. You’d write your own `isProcessing` logic and manually push an item into an array. Now, Inertia treats the "pending" state as a first-class citizen. Host: Alex Chan That sounds like such a relief for my codebase. I can see that cutting out dozens of lines of `useState` or `ref` management in Vue or React. But speaking of requests, I wanted to ask about the new `useHttp` hook. I saw this in the docs and I was a bit confused—isn't Inertia all about "visits"? Why do we need a separate hook? Guest: Marcus Thorne This is actually the sleeper hit of version 3.0. So, historically, every request in Inertia was a "visit." You click a link, the URL changes, the page state refreshes. But what if you just want to auto-save a draft? Or what if you have a search bar that shows results in a dropdown? You don’t want the URL to change or the whole page to reload. Host: Alex Chan Oh! So it basically kills that awkward moment where you’re trying to decide if a feature should be "The Inertia Way" or "The Manual API Way." Guest: Marcus Thorne Exactly! It bridges that final gap. Host: Alex Chan I love that. Now, I have to ask about the "final boss" of performance—Server Side Rendering. I’ve had some... let’s say *adventures*... getting SSR to work perfectly with Vite and Inertia in the past. Especially around hydration—that split second where the page is visible but you can’t click anything yet. What’s the word on SSR in v3.0? Guest: Marcus Thorne Yeah, the "jank" is real. (laughs) v3.0 has really doubled down on the Vite integration. They’ve optimized how data is serialized and passed from the server to the client. The hydration process is significantly leaner now. Host: Alex Chan That’s the dream, right? High performance without having to manage a separate Node.js frontend team. Honestly, it sounds like version 3.0 is really about removing the "buts." Like, "I love Inertia, *but* I wish it did optimistic updates," or "*but* I wish it handled background requests better." Guest: Marcus Thorne Exactly. It’s the "No More Excuses" release. If you’re building a Laravel app today and you aren’t using Inertia v3, you’re basically making life harder for yourself for no reason. Host: Alex Chan (Laughs) Well, that’s a pretty ringing endorsement! Marcus, before we go, for the devs listening who are maybe on v2.0 right now, is the migration path scary? Or is it a "one-afternoon" kind of job? Guest: Marcus Thorne It’s surprisingly smooth. The biggest thing is just swapping out some imports since Axios is gone, and maybe updating your SSR entry point if you’re using that. The team has put out a great migration guide. Honestly, you can probably get the core stuff done in a couple of hours. Host: Alex Chan That’s what we like to hear. Marcus, thank you so much for coming on and sharing your experience. This has been super illuminating. Guest: Marcus Thorne My pleasure, Alex! Happy coding, everyone. Host: Alex Chan And for everyone listening, if you want to dive deeper into the technical docs for Inertia.js v3.0, head over to inertiajs.com or check out the latest posts on Laravel News. We’ll also have links to Marcus’s work and the migration guide in the show notes.

Tags

Frontend web development php inertia.js laravel spa optimistic ui