Q19: Back Forward Cache

[00:00:00]
>> All right, Question 19. Which of the following values will always make your page ineligible for bfcache or back/forward cache? Is it unload, pagehide, onbeforeunload, pageshow, all of the above, or none of the above? All right, so the only answer here is unload, A, okay? So first, what is bfcache or back/forward cache?

[00:00:25]
So let's say that we're on this page, and now we navigate away to using ReactServer components to another page or another link. In that case, what can happen is that the browser optimizes the navigation by kind of, well, we'll finish the call stack first. But it just creates a screenshot of everything that happened on that page kind of.

[00:00:47]
So any pending tasks will be paused, you still have access to the heap, everything else. So now we navigate away, and it'll store that in the back/forward cache. So now we're on that page again using React Server components, but now when we go back, it doesn't have to rebuild the DOM, rebuild the CSS, or make any requests.

[00:01:06]
It just uses that snapshot that it captured before leaving, and it can just resume any task that was pending, well, that was running as we left, and then it was paused when we navigated away. And then they can just resume as we navigate back. And this allows for, especially a mobile, you just go to a page and you wanna click back.

[00:01:27]
You don't wanna have those annoying loaders again, even though you were on the page half a second ago, it should just remember the state of your page. I don't know if I'm explaining what unload does, essentially, and it's not even a super reliable method to use anyway. You should use pagehide in any case you wanna use unload.

[00:01:45]
But it kinda tells the browser, well, after unloading, it should, or it could alter the state of the page. Which if you're caching it, that shouldn't happen, it should just kind of rely that the cached state is just what the page will be. But if you're using unload, then you're kind of telling the browser, well, after unloading, the page might change, so you couldn't cache that.

[00:02:06]
So if you're having or if you use any unload event listeners, it will be ineligible for bfcache. Pagehide is fine, onbeforeunload is fine on Chrome, but I believe it's not on Firefox. Also, back/forward cache, it's been used by, I believe, Safari and Firefox for years now, but only pretty recently came to Chrome.

[00:02:28]
So that's why it's still kinda new. Even though it's not new technology, it is kinda new there. So yeah, onbeforeunload is fine on Chrome, but not on Firefox. Maybe I can quickly also show you, you can check if your page is eligible. Let's see if I can just find it this easily.

[00:02:45]
I believe you go to Application, and here you'll see back/forward cache. And here you can do test, and this one isn't, but if I go to frontendmasters.com, I don't know whether it's a .co. Here we can do test, it's not, maybe you have a frame or something. So here you can see why a page is or isn't eligible for a back/forward cache.

[00:03:07]
So that's pretty cool, cuz you kinda want it, right? I wanna go kind of, when I go back you saw that it kinda took a while. It could just keep that state, if that makes sense. I feel I kinda explained it poorly, but yeah. There are of course many other reasons why something couldn't be cached, you also will find that here.

[00:03:27]
I think there's just a resource entirely dedicated to when or when your page cannot be cached in that way, yeah.
>> So how long is it cached?
>> Not long.
>> Your tabs.
>> Yeah, I don't know the exact lifespan, but I believe it's just for the navigation going back or forward.

[00:03:48]
So in this case, when we went from the article back, then it will also keep that article in cache in case you wanna go forward, cuz it's back/forward cache. But I believe after using it once, I think, I believe it's then purged from cache. Because otherwise, you're just filling your cache with all these things and it wouldn't really make sense.

[00:04:12]
Because you're keeping that state of the call stack event loop, which won't be the same when you're navigating back and forth again. Because then it will be different, so it'll make a new snapshot again, and then store it in bfcache again. So it'll just use it once. Yeah, I hope that made sense.