CDN Cache & HTTP Requests

[00:00:00]
>> And so that's the lot of showing, it's time for some telling. So I'm going to cd into six cloud functions start, and let's open up the code. So, functions right here is in this index.js file. And so what I've done is I've created a whole series of functions that I wanna go through to show some cool things you can do.

[00:00:33]
One of my favorite use cases for cloud functions is you can integrate it in with Firebase Hosting. So Firebase Hosting started out as a static only hosting provider, so only hosting CSS, HTMLs, JavaScript files, images and whatnot. And you couldn't do any dynamic server code. Well, we've integrated in with cloud functions that allow you to kinda get the best of both worlds there.

[00:00:53]
Where you can do server side generation of your webpages, but also still get a lot of the CDN caching benefits of Firebase Hosting. So the way this works is, is that I have this trigger right here, for every time a request happens. So let's say that I want to say, hey you, I got a response.

[00:01:14]
I'm gonna send down some HTML. And all this simple website is going to do, is it's going to do Date.now, so that will just give you a little timestamp every time. And what you can do, and you will only see this until you deploy because local deployment doesn't have, we don't have a CDN running on our machine.

[00:01:38]
But when you deploy, you'll see the effects of caching. With Firebase Hosting, you can set cache control headers, and say all right, whenever this function is called, put it back into the CDN cache for this amount of time. And that's called a TTL, or a time to live.

[00:01:58]
And so this way this function will not get called again, until that TTL has expired. And when we're serving from a CDN cache, it is immensely faster because that is a static file, for all intents and purposes, on a machine near the user. So if there is a CDN edge somewhere nearby us here, I believe there's one in Iowa or something nearby, and I made a request out to it, it would just go to there and right back.

[00:02:26]
But if the TTL was expired, it would then go all the way out to Cloud Functions, then store it. And then everyone else who's requesting that resource in this location, they also will get it from the cache until it expires. So it's a really great way of having dynamic with a little bit of caching, it's kinda like a little slider of, how dynamic or how static are you?

[00:02:47]
And how we do that is we set a cache control header, and cache control is a notoriously interesting header. You first start out by saying this is publicly cacheable. And then we set the max-age. Max-age is how long this lives in the local browser cache. And everything is in seconds.

[00:03:13]
So I'll say 500 seconds. And then we use s-maxage. And if you're wondering, hey, you miss the dash and max-age, I didn't. And there's just no dash in that one. That's just how it is. And I can say, this one will be for 1000, so double the seconds of that.

[00:03:35]
And so now this will store in the cache for this amount of time when it goes back. So I wanna set the headers first. And now from here I have this function, but it's not going to be hooked up to Firebase Hosting, and we'll see here in just a minute.

[00:03:51]
So I'm gonna Run the emulators, which I have running. I have this little shell script that kinda runs it all for me. And it's set some hosts for the EMs. So the Admin SDK to hook up with the emulators needs to know these environment variables right here. So you say, Firebase off emulator host, Firebase emulator host or fire store emulator host.

[00:04:15]
And that way the Admin SDK, won't talk to a production environment, it talks to the emulator. So I can say sh emulators.sh. And now it's going to run all of the emulators. It takes a bit to boot, but great. And what I can actually do is I can go into the emulator UI and it says, hey great, we see that you have a function named SSR.

[00:04:48]
Here's your local URL for it. It even prints it out in the terminal as well, but I just wanted to show that you also can get it in the local emulator. So now, hey look. We don't see the benefits of the CDN because like I said, no CDN is run on localhost.

[00:05:05]
It's just localhost. But if I were to deploy it, you would see because I believe it still applies. This just zoomed in, I don't know if we'll be able to do this. Wow, yeah, let me zoom out for a second. SSR, headers, cache-control. So this right here is set, the CDN will understand this, it will handle all of our caching for us.

[00:05:32]
So that's all we need to do, is apply that. But it still prints out this kinda ugly URL. I wish it was more on a regular site. Most people, you don't say, visit my site @ frontdeskmasters@UScentral1SSR, you want a real domain. So with Firebase Hosting, you can set up custom domains onto it and then deploy your site out onto that, but we also give you a whatever your project ID.web.app is by default.

[00:05:58]
So that's why in the beginning I was like, name your project ID something cool because you can get your own cool.web.app domain from that. And to hook this up with Firebase Hosting, all I have to do is my hosting config in my firebase.json and say, I want to specify a rewrite.

[00:06:16]
And whenever we encounter I could say, the path of hello, or the path of SSR, or I can even use a glob pattern and say, any path at all ,it's going to call a function named SSR. And so now, I need to, yes, I'll just kill the, I'm in Firebase off, I'm in the wrong one, so let's just copy that over.

[00:06:48]
Where is it? Too many, okay, we need to edit the firebase.json in here. I had it right in there anyways. So we have rewrite source "**", let's call that function. And that SSR, is what we named it right here. And so now when I write sh emulators.sh, it's going to run.

[00:07:19]
It's not running. Why is it not running fire store, I mean the Firebase. It's not running all Firebase, I didn't say and, sorry, and hosting All right, it's importing all the stuff, great. And so now we're in here and my hosting URL is at localhost5021. My gosh, where's my browser tab?

[00:07:57]
Here it is. And hey, now it rewrites and it works. This is super basic and not good looking, but you can run a whole NextJS app in this. You can do anything, it all follows this formula. We actually have an integration with NextJS, where right now it's an experimental, behind a flag in the CLI, but if you just write Firebase deploy, it builds and generates your function code out for you.

[00:08:24]
But all of these things are possible, where you can write server code. And so that's one type of event, is just an HTTP request.