Automatic Browser Request Cancellation
Take a look at this video transcript where we explore the concept of automatic browser request cancellation. Discover how the browser handles canceled requests and why it's not possible to cancel a request once it's sent to the server. Learn how Remix, a web development tool, simulates browser behavior and handles race conditions and data updates. Find out how to prevent form resubmissions and navigate effectively. Dive into the world of modern web development and understand the intricacies of automatic browser request cancellation.
00:00 Take a look at this. When I hit delete, and I just keep on hitting it, you'll notice that we're getting cancelled requests in here. Right here, the status is cancelled. And then finally, when I stop hitting delete, does a request actually go through and come back and all of that good stuff. What's interesting about this is that the request itself is actually not canceled.
00:19 It's not possible for you to cancel a request. Once the request is out, the server has got it and there's no way for us to communicate, oh wait wait wait, it's kind of like sending an email, oh shoot I forgot to include the, you know, the greeting or whatever, like it's too late, it's already gone And so there's no way for you to say, oh, nevermind, cancel that request. And so it is kind of a bit of a misnomer to call these canceled because they're not actually canceling the request. What they're canceling is the browser's handling of the response. And so, well, every single one of these was saying, hey server, I want you to delete this note, delete the note, delete the note, every single one of these.
00:56 So the server is actually going to be handling each one of those. So if we take a look at our logs here, we're going to get a post for every one of those. The server saw every one of those post requests. So that's just the way that the web works. You send a request, the server's going to get that request.
01:11 If you want to do any sort of actual cancellation, then you need to do that in application code and send an additional request. And that additional request would be, hey, cancel the last one or however you would do that in your own application. So that's an important thing to understand about cancellation. Another thing that's interesting to understand about cancellation is the fact that Remix is actually just simulating what the browser is doing, what the browser would do by default. That's a big part of what Remix is all about, is simulate what the browser does.
04:44 Because again, cancellation does not mean undo the thing that happened. It just means ignore the response, which is quite beneficial. You're not having to process the JSON response or navigate wherever it says to navigate. So it is useful to have this cancellation mechanism. But yeah, that's something to keep in mind.
05:03 Another thing that the browser is really good at is if you say, hey, I want to navigate here and I want to navigate here instead, oh, I want to navigate here, because it's canceling, it means that we don't have to worry about race conditions of one thing finishing before the next one finishes. And so you never have to worry about ending up in the place you clicked before. So like if the response from this one came back after the response for this one, you're only going to go your ultimate destination, the last thing. It's like, basically the right thing will happen. And Remix emulates this exact same behavior.
07:15 There's no code in our application that says, okay, when they delete one of these notes, let's make sure to update this list on the left because that note is no longer there. Remix manages that for us just like the web platform. Remix is just emulating what the web platform does for us automatically. So, you don't have to worry about race conditions, you don't have to worry about race conditions. You don't have to worry about form resubmissions unless you want to like prevent the user from being able to submit the form again, which is a progressive enhancement piece that is pretty straightforward here.
08:24 If I say, hey, delete this thing and then navigate over here, then we're going to end up with the correct data. So thank you Remix for just emulating the way that the platform works. This is how Remix handles form resubmissions, race conditions, form cancellation, navigation cancellation. It's all handled really really well by Remix. So hope that's helpful.