00:00 We need to talk about how browsers manage forward and backward in caching with HTML documents. So I'm running the original solution for our regular SPA that was just making data requests and stuff. There's nothing going on with RSEs in this browser tab.

00:16 And, in fact, I've even disabled the React DevTools extension here because it has a bug currently that isn't allowing me to demonstrate this to you. So if I click on this, we're going to get a full-page refresh. I click on this one, another full-page refresh, and so on and so forth, and I can do a search and everything.

00:33 Now, when I hit the back button, you'll notice it, like, restores instantly, which is interesting. We're not getting our fallback or anything like that. And the reason this is happening is because the browser actually is going to preserve our state,

00:46 not only the DOM state, but even, like, scroll position and form inputs and a bunch of other things, which I think is just so fascinating. Like, here's our form input being preserved. It's really cool that the browser does this for us. And you can control this with cache headers and that sort of thing,

01:03 but I think that is a pretty interesting thing that the browser does as sort of a platform to make the user experience better. So, of course, if I enable this extension, you might try this yourself, and you're like,

01:17 oh, it's not working for me, and you'll actually get a warning in here about the reason why it's not working for you, being it's using some sort of – trying to send a message at a certain time, whatever. Maybe the React DevTools will be fixed by the time you see this, but I wanted to show this to you because you're probably going to have the DevTools installed.

01:36 I hope you do. And, yeah, if you wanted to try and recreate what I just did, then it won't work if you have React DevTools installed and running. Okay, so the fact is that the browser is going to manage this cache for us, and now that we have overridden the browser's behavior, we're no longer getting that cache behavior,

01:55 and so that's why when you hit the back button, we're getting full-page refresh. Well, it looks like full-page refreshes. We are rendering the suspense boundary because even though we're starting our state update in a transition, React says, oh, this came from the pop state event, so we're not going to do the –

02:14 we're going to treat everything as a brand-new suspense boundary and show that suspense fallback. You can maybe argue one way or another whether that's the way that it should work, but the fact is that it does work that way, and so what we need to do is add some caching

02:28 because what's happening is we go back, we set the location, and React says, oh, okay, let me run through and go into your use call, and that's going to throw, and so we end up suspending.

02:42 And what we need to do, though, is actually hang on to an old version of the content just like the browser does. So every time we get refreshed content, we're going to stick that in a cache, and so then if you go back, we can look that up in the cache, and so when that use call happens,

02:59 it's not going to suspend because it's in that cache immediately. We're going to do this by setting a unique key every time we call push state, and so we put that key in there. That's going to be the key for our cache item, and then when we go to look up our content,

03:16 we'll look it up by that key, and then magic ensues. It's in there instantly. If it's not in there, then things will suspend and everything works as usual, so this really is just an optimization that we're going to be performing here. But, yeah, this is going to involve a number of bits of refactoring.

03:34 You're going to have an initial key, and if an initial key doesn't exist right now, we want to set that immediately so that we'll be able to cache that initial content.

03:46 We're also going to be storing that key in our state so we know, okay, which key are we currently using. We also have a fancy use content cache that has been implemented for us by Kelly, our coworker,

04:01 because that is kind of orthogonal, to use a TC39 word. It is not necessary for your learning of RSCs. Feel free to dive into it. It's actually pretty cool. But that cache, anytime we update that cache, we'll trigger a re-render of our component.

04:19 And so, yeah, we can retrieve our UI, our content from that cache, and as we're navigating around, whenever navigate is called, we're going to update that cache. When we go forward and backward in history, we're going to reference that cache, and it's going to be cache everywhere.

04:38 We're all rich. So let's get into this. I think you're going to have a good time with this one. When you're all done, you should be able to go forward and backward, and the UI should be responsive and stilly. So let's get into it.