Python Web Apps that Fly with CDNs Transcripts
Chapter: Avoiding Stale Caches
Lecture: Demo: using cache_id_builder
Login or
purchase this course
to watch this video and the rest of the course contents.
0:00
So we've got this cache buster build cache ID method here. How do we put it to use?
0:08
Well, we need some way to communicate or pass this over to our HTML.
0:13
And we have these view models whose job it is to pass all the data and functionality over into the HTML side. And guess what? We'll just leverage that.
0:22
So down here in the view model base, we have this function called build cache ID, and it just takes a static file reference,
0:29
a full path file within the web app. And then it's just gonna delegate to this cache buster build cache ID, passing the file, but then saying,
0:38
"No, we're not in development mode," and then stashing the root folder, which is, as in this case, go to where this file is,
0:48
go to its parent, its parent, its parent, which is right where the slash static would lead to up here.
0:55
So a little bit non-obvious why there's three parents, but that's what we do for getting back to the top level of this web app here.
1:05
Sure, we could make that a configuration setting, but if you can compute it and don't have to have configuration, even the better.
1:12
And then this last one is about logging these operations. You probably want to turn that off once you get going,
1:19
but we're going to leave it on for this chapter so that we can see what's happening. And then we just pass it back as build CacheId,
1:27
a method that can be called by our HTML. So let's run our app. Remember, we could click this, and this will actually still work
1:36
because everything else we're getting is still going to the CDN. But just to stay consistent here, let's go over to our ngrok and click this.
1:47
There we go. Now we're running the ngrok version. Remember, it still has to be running down here in PyCharm, or however you're running it.
1:57
But let's say we want to make these files here change. So for example, if I go image and look at this, it has this. The one and only URL is apple/webp.
2:10
So this could be a problem. Let's go and make a change so we actually see that problem. So here I'm refreshing.
2:18
I can do a hard refresh, a little bit of a flicker, but it's still basically instant. So come down here, and if you go into the images,
2:28
the categories, let's open that in Finder. Notice there's this apple one here, but there's also this apple one.
2:36
Let's suppose that we wanna use this now as the category. So I'm gonna make a quick change. We'll call that V1, and that'll be V1.
2:47
And this now is just going to be Apple. There. Really, that's the one that we need to change. So if we come along here and we refresh it,
2:58
notice this file did not change. Well, maybe the problem is I need a hard refresh. So I'll do a Command-Shift-R or Control-Shift-R on the other OSes.
3:08
No. Maybe I can go over here and say, show my dev tools. Go to network, disable caching, and try to still see what's on the screen. And refresh.
3:24
Nope, because remember, the CDN also has this copy of the file, and it says they'd said three months. We're barely into, we're a day or two into this.
3:35
We got plenty of time left. So let's undisable caching, right? This is a trick that our regular users certainly won't be employing.
3:44
They don't know it's changed. So how do we fix this? Well, let's go over here and find where that is. That is gonna be in templates.
3:58
And again, new project or new sub project. We've got to mark the templates folder there. This is gonna be on home on index.
4:08
And this is where we've got our full CDN version here. So what we want to do is we want to go to the end of this.
4:19
You get as much room as we can, I suppose. I'll say question mark. Oops, I didn't mean to overwrite that. Say question mark, cache ID.
4:31
You can put whatever you want here. You can put version, whatever. It doesn't matter.
4:36
There just needs to be some query string thing that changes. And it's going to be
4:42
the result of calling a function build cache ID. And in there, we got to pass a string.
4:51
And what is the string? It is this. It's kind of kind of yucky looking like that, plus the
5:03
image. There we go. Alright, so I'm not a big fan of how that looks. But it's not too So what we got to do is we just say the cache ID is
5:14
go into Python mode, so double angle bracket. We want the string. I'll highlight the whole bit. Double angle brackets to take this result
5:24
and turn it into a string in HTML or print it to the HTML. And then the file is going to be whatever it was here.
5:32
But not the whole remote one, but just the static one. So /dynamic image category is this. Whew, all right. Now let's restart it.
5:42
Remember, I told it to cache in the app, to cache its memory or use its memory of what it saw before for speed. So we do have to restart the app,
5:53
but also because the HTML has changed. So no big deal, all right. Now remember, no matter what I tried from the browser's perspective,
6:02
I couldn't get this file to change. Let's try again. Let's just navigate around. So if I click this, it'll reload the homepage. Soft reload. Hit it.
6:11
There it is again. Now notice, every one of those was a little bit slow. Why?
6:18
Because if we view source, and we scroll down, look at these big long cache IDs. Every one of these changed as far as the CDN is concerned.
6:29
So the CDN had to come to us to grab that file so then it could show it. But now it's seen it before, so let's click away and then back.
6:39
Notice every click it's super, super fast now. And it changed. You might be thinking, oh, well, you kind of reloaded the whole thing.
6:48
Let's make that change one more time. Let's go back here, change that to V2, that to V2, and put these back as the way they were.
7:00
So this will simulate just the file changing once again, the static file. Again, for this change to be picked up, the way I'm running it,
7:10
you don't have to run it the same way, I have to restart that. And that's like kind of the production speedy style.
7:17
If I click this, notice just the Apple one is redownloading. And it redownloaded cuz even though it had it before, it now thinks it's different.
7:25
But again, navigating around. Super fast, okay, come back in here. Super fast, Apple, same images right there.
7:37
Excellent, so that's how we avoid this cache jailness, even though the CDN is super aggressively caching, as well as our web app
7:46
is aggressively caching, right? So we've got these multiple layers. The user's browser saves everything.
7:53
It doesn't go to the CDN, and the CDN doesn't come back to us. But anytime the file changes, that part right there changes.
8:01
And as far as the CDN and the clients are concerned, that's an absolutely unrelated new piece of static content it's got to get.
8:10
So super, super cool way to do it. Very easy. The actual HTML you got to write is a little bit clunky,
8:18
but just copy and paste it and you're good to go.