00:00 So, inside of our root component, we're going to add a useEffect to handle this problem. So, let's create our function, handlePopState, and we'll add that event listener and the cleanup. And then, inside of handlePopState, we just need to do a couple of things.

00:18 First, we need to get the next location. So, this is actually the location we went back to or forward to, whatever, but this is going to get our global location because the URL gets updated and then our callback gets called. If I dive into this, it's really just grab the location, path name, and search and stick them together.

00:35 So, there's not really a whole lot going on in here. And then, we're going to, we want to set the next location, so update the URL. And then, we're going to fetch our content and we can make it fetchPromise from fetchContent to the next location.

00:53 And then, we're going to get our next contentPromise from createFromFetch with the fetchPromise. Now, we don't actually have to update the URL like we're doing down here because the URL has been updated for us. The browser does that. So, we're just saying, oh, the browser did a thing. Let's just go update the UI based on the change that the browser made.

01:11 And so, now we have our next contentPromise, which, of course, we want to start in a transition updating our current contentPromise. So, when it suspends, it shows the pending UI and all of that stuff, right? That is the desired outcome. But if you tried it, we'll do a refresh here.

01:29 We'll go up and back. And then, we go back and forward. And we're getting full page refreshes. No, they're not full page refreshes because we're managing this with pop state. But they are triggering the suspense boundary. And I thought, wait a second. This is in a start transition. What's going on? It shouldn't do that. Well, it does.

01:47 And we'll look at why that's happening in the next step. But the key here is that this actually isn't all that different from a regular router. You're fetching new content. Typically, you would fetch new data. You'd call the loaders or whatever. But here, we are just fetching new content, new RSE data.

02:07 We treat it as a navigation. So, we update our URL. And we start it in a transition. So, presumably, we shouldn't fall back to all the suspense boundaries. But we do, and we'll see why that is here in a bit.

02:20 And, yeah, of course, we need to take this content, the RSE payload, and convert it into React elements. And that's what this does. And then, we update our content promise. And that re-renders all the way down to where we use the content promise. There you go.