Transcript
00:00 So let's grab this stuff that we were before. We were only doing this when we didn't have something in the content cache, which could have happened if somebody refresh the page and then they hit the back button. We didn't have anything in the cache at that point. So we wanted to go load the data for that
00:15 page. Now we want to do this every time because the data could have changed. So we're going to move this up here. And then once the the fetch request has finished, we need to update our content based on that. So we're not going to update it right away. So that's why we're still putting this inside of our if statement,
00:34 because if we update it right away, then we end up with a, showing a loading state when we're just revalidating. It's possible that it's the same as it was before. And so every time you hit the back button and you show a loading state, like, no, no, no, we don't want to do that. So we're revalidating kind of in the background. And so we're going to wait until everything is finished loading before we update
00:57 our state. So we're going to say on stream finished when that fetch promise is finished. Then inside of a transition, we want to, whoops, not start function, start transition. There we go. We want to update our content cache. So content cache dot set at that history key,
01:16 the next content promise. Now the trick is that the next content promise is actually declared after. And so we need to move this up before, but the problem is that this depends on the fetch promise itself. So we're going to move this down, move this over.
01:35 Now we've got our let and we've got our const and everybody's happy. And with that, now we can save, we can come over here and say, Hey, let's make sure we refresh, by the way, don't forget to refresh, get the latest content, latest data or latest code. There we go. Add a couple of exclamation points here at another one here.
01:56 And then one more here. And if I hit back, then when we were on dread, not this one didn't have an exclamation point. So you should see that it has no exclamation point, but then it revalidates and the exclamation point gets added. So hit back, no exclamation point. And then it's added hit back. Same story, no exclamation point on either one of those. Then they get added.
02:16 Now you can decide for yourself whether this is the user experience that you want. But to me it makes sense that we kind of revalidate in the background for these types of events. And so that's why we decided to add it to our little framework. Good job.