Cache Control Headers Explained

I like to throw it on. I'm not the type that would wear a Wu Tang shirt,

a request for

battle some guys from Poland, and they destroyed us. It was,

Yeah. I wouldn't I wouldn't say a big fan, but I'll throw it on every time.

Oh, man. Alright. That's it for today. Thanks, everybody, for tuning in, and we will catch you on Wednesday.

Cash.

it was, very unfortunate because they're, like, internationally,

they actually wanted us to do their site.

for the price? Whatever. Request for proposal. Request for proposal

I kid you not. They said, yes. We want this we want this agency to do their site. And you know what? We sat down as an agency, and,

a t shirt or sticker that somebody has on their laptop. Although I just Googled it, and it seems like the geocaching community has sort of co opted that joke. Those geocachers, what do they think they're doing? Make sure you use a coupon code tasty treat. Gets you 2 months for free. Thank you, Century, for sponsoring.

from ICP,

yeah. Yeah.

and we got to, The clown festival or whatever it's called. Oh, good.

familiarity with Wu Tang even is. With mine? Yes. What's your what's your Wu Tang familiarity? I'm a I'm a little bit of a woo head.

Let's be friends. And I couldn't even do that. It was embarrassing.

Cash rules everything around me. Yes. I yeah.

What do they call that? Like a request pretty pretty crazy. I was like the Workaholics episode where they go to the like, at the end of the day, it can save you money, and it can save your your users money who are paying for the bandwidth and and all that kind of stuff. It can also increase those user misery scores on on Sentry. Right? Can that Oh, yeah. There you go. Make your site feel way faster for your users. So which is honestly the the biggest plus in my mind is that perceived time and actual real time of loading your site will be better for those users. Exactly.

and they,

competitive. Like, these it. Dudes who are you know, they compete on on major major stages, and we we had to go against them in the 1st round, and we're just like, oh, man. We're gonna get worked, And we got we got we got destroyed. So,

I have no no love a clown buzz. Once over. I'm not down with the clown, so to say. I,

I don't really wanna do this work, and we just decline them as a client.

Yeah. Yeah.

here's a question. As a Michigander at heart, would you rather go see Wu Tang or ICP. Oh my god. Wu Tang. What immutable. This is kind of interesting. This one specifically for, So the header is called cache control, and a directive is essentially

it's funny. I worked at an agency that got requested,

Head on over to syntax.fm

Yeah. Be, at a b boy battle that was at the Wu Tang concert. So we we actually went for the b boy battle,

And don't forget to subscribe in your podcast player or drop a review if you like this show.

So you're not you're not Visiting syntax. F m and waiting for the website to generate, you get the version from the last guy, and then the next guy gets your version. Right? It's kind of off by 1, asset can only be

standard here. So that's interesting. Yeah.

So do that. But in the background, go ahead and that says, like, Cloudflare will try to compress your images Your the 1st time But that is allows it to be both fresh as well Yeah. So those are all Sometimes I, That would be really handy. You'd pop that header on there, and that would be enough to tell your CDN or your server, Cash, and that that to you is the browser. Your browser is a private cache, whereas, of headers,

as pre generated if that makes sense. Yeah. It seems like the ideal way to do things and that's how we're doing a lot of caching these days of it, you know, whether that is like like we've cached images on,

blown his horn about how amazing the Remix website, The syntax website sending over what type of, Online, if you just search, like, ICP documentary, you can pop a no cache header on there,

The zoo themed library.

stale. So again, that whole Max age thing, It is considered fresh before it, stale after.

essentially what that means is serve the stale version from the cache,

you know,

even if it is considered for there's other there's a a private cache, which is generally your browser level.

Apparently apparently, Really, it's not a standard, but everybody, every browser has implemented except you know who. Wow. Wow. Safari.

the syntax website. And the reason that we do that is because And let's get into the cache control header. So there's kinda a couple different

Cloudinary or whatever where it's giving you the, you know, the the first person is doing all the work and then the next people dot CSS. That is why. Right? Because it. If it is, you you want it to be just straight up cached by the browser and you want it to always have that 1. And if the file changes, then that hash that That unique identifier for that will change, and therefore, I will know to grab the next version of it. One kind of other one I saw here that was interesting is the no On this Monday, hasty treat, the 4 164th

And he there's a screenshot of the headers and what what is What is powering that? Stale while revalidate, meaning that, And then there's the other way around. If you are on the client and you need to specifically

will,

and then we will serve you that up. But what happens is in the background, Peace.

will when you visit it, That that's what I got there. So, thank you, Chris m, for writing in this part of question. I thought it was good enough to dedicate entire hasty towards. I think we'll see a lot more of this.

By the I think it I think it's the latter. It's funny Because this is something that we all all kind of have to do by hand right now, which,

Remix Conf website is, That of something that has been generated,

Data fetching library, and this is a browser standard.

I didn't know that this was a nonstandard Yeah. We we used to joke about making T shirts that said that in, like, 2011 less. Yeah. Yeah. Because we're all Wu Tang Wu Tang heads. I I I'm actually I wonder what your your for a full archive of all of our shows.

are getting the cached version. So but this way, it does all the work in the background. So the even the 1st person is getting a previously cached version, And the next people are getting the the next cache version. So you're always getting what could be considered, like, a performant version of the load.

But in the background, go and fetch the new version. So you have a website,

you visited it, and you have a list of dogs.

I just saw a tweet from Kent C. Dodds. They

mean

really custom solutions or working really hard it. On performance, reducing kilobytes here and there, and then they skip things like caching that could really even make a much bigger difference in much it. Less effort. So, Wes, do you want to, each of those now. You wanna grab the first one? Yeah. The well, I you know, to be honest, I I don't know that much about these. So

exclamation point. So let's talk a little bit of the cache control headers caching in general and how these things can help us build up more performant applications as

working on,

And I just truly,

My question and struggle has been with caching, cache control headers and would love a better explanation on some of the fields that I just blindly copy and paste from Internet resources.

I put down basic caching mechanisms that are built into

a request, it comes from you and the browser I could see that being handy if you had, like, a button

or do. Help

explain a little bit about what a header is, and then we can get into cache control headers? So when you have either a request or a response, shot. And and also, like, I wanted to go up to them and be like, hey, I I'm of Polish heritage, but, they only Speak Polish, and I, I speak no Polish. So I couldn't even be like, listen, I'm I'm kind of Polish.

Yeah, I just looked it up on their docs. They do have in the future, dot,

directive on there, Are going to take a lot of the load off and make it very easy to build performant websites without

assets. And I like to think of it as like CSS and JavaScript how or specifically, To not to bypass that, you can pop a no transform before it, meaning that, an image, a HTML file, a list of dogs, you name it. It. And then what comes back from the server is a response.

and give me the raw stuff. Give me the good stuff.

that CSS, Remix Conf going on right now, and he's No. Your browser will cache that for you.

with the origin Cloudflare

The must revalidate response directive indicates that the response can be stored in the caches and can be used while fresh.

pass any caches you possibly have, regardless These are through things called directives,

Then you can put the no transform on there. I'm assuming this works for other things like Cloudinary or for a version set along with the request or response, and that could be as simple as sending over an API key

or cachefly or any of these CDNs that sit in between your server Century does error exception and performance tracking.

Jess, another way no. I think it's important to call out that, like, you typically, when you're working with many frameworks,

in the CDN, you can pop a private

if you low if you look at it. The source of your framework.

because if you want To load a new version of style dot CSS, essentially forever

so that it can send it to you as fast as possible. It's a it's a proxy in the middle. And if you specifically need to tell the CDN in the middle There's other ones here private

headers as well. So, there also is no cache that will obviously not cache the thing at all or ever. That's very handy for things that are constantly changing.

It's just standard And then finally, there's, like, a reverse proxy that can sort of sit in front of your, where

mess with that at all, we are generating a the next version of Fetch

you must change the name of the resource CDN

and it will make sure that it is not thrown in there. It's beautiful. You don't have to, like, figure out some custom API.

CSS or scripts dot 1.2.3

support for this. So

cached on a private

Response directives, they're coming from the server to the client.

and the client, Those things will try to cache as much as they possibly can. And if you wanna explicitly if you have like style

instead of changing the style dot CSS file.

the most common, when there is a new say that this the asset cannot be downloaded or there's an error that is Is sort of the benefit of the cash as well as, so that we can retrieve it from that bag You pop in a mutable tag on there, and what that will tell the browser is cache this thing If the response becomes stale, it must be validated whether it is an image, whether it's some HTML,

versions of caching, and maybe we should What caching is just in a second. So caching when somebody else visited it. We put that in the cache, have remix Stale while we're validate want them to not

means that you are saving the result you have an image of a dog, and then you go back to that page. A minute later, you have an image of a dog again. Hokey. Do you have to download that twice?

the cache control headers, which tells either the browser or the server

Are sending a request to the server

And one of those headers that comes along with a request or a response is, building something custom that's built into the browser. Use the platform. Right? So stale if error will just serve the stale version without actually changing them. And if you the whole idea behind the Next. Js if it is still fresh.

response you're sending. Is it JSON or is it text? You know, there's lots of metadata that goes along with the with the with the request or response.

all of those things take work.

However long that 86,000.

Essentially, how that works is that your browser will save I don't know, Fetch dogs, but, like, fetch it from source. And you wanted to have a special button that goes past the cache.

Yeah. So what's this is the SWR. This is what, and he says it's just using browser standards.

it's easy to use In in SvelteKit, you just say cache max age.

3 hours ago. So therefore, I'm not going to go back to the server and ask for another copy you can visit the website. You immediately get the stale version, Peace.

that is 1400 minutes, and and you start to see these issues pop up. You fix them. You, say they are fixed, and you hope they do not come back.

So what this will do?

primarily because,

with which max age is basically a time to live. You like, how long is this thing going to live? Right? So the max age is the one that I use,

So max age is basically

And before it tries to request it first, it will look at the header on that item and say, alright, well, and and go ahead and maybe make a a list of dogs or maybe an HTML file. But the a second time. Maybe it doesn't make sense to regenerate all that. That can be stored at a CDN level.

got it You can you could tie it to a specific version of your code, which is good because, like, one thing is if you have an error that keeps popping up and you fix But somebody hasn't refreshed the page yet, the error still comes. So you could say, alright. Well, this this is fixed in version 4.2 stale if error. So serve up the this one is not very well supported, but it's sort of the whole idea. This is why libraries like remix are becoming popular is that these headers the new version. What I don't know, and maybe somebody on Twitter can answer this, tweet us has to text f m, is will the browser automatically swap out it. The asset for you on the page, or does it wait until the next refresh? Refresh.

Okay. I mean, I I know a little bit, but the first one is max age

how long should this thing live before we we grab a new one. And so what do I have here? I have one that has a max age of 8, 86,400.

It's nice that it's done in seconds and not milliseconds because then you don't have to do that extra 1,000 millisecond division.

all of your assets. Again, pictures of dogs, HTML images, you name it.

UI and code bugs, but also UX issues. Easily build custom funnels it. Based on events for clay clicks, views, checkouts, and custom events, and see how your your users journey through your site, it. Engage, retain your customers with LogRocket really, sometimes, you know, I think people they spend so much time

Boss, and Scott

coming live from Canada. How's it going? It's going good. Let's talk about our sponsor, which is Century And then you get the new version of the background, and that's actually how the syntax website works as well.

it. Episode of Syntax. We're gonna be talking about cache control headers. Now this is something that we're gonna have to be spending more time on as web developers as tools start to utilize

It's just an awesome company for you use that in conjunction with max age, Oh, there's a really good documentary say, no. No. No. No. This is private data or I never want this to be cached, Opera Mobile, maybe. Opera Opera Mobile is a, like, a

user behavior on your site. Now these are some things that I think have been

As always, who is the cohost of this show, Wes,

of our software, so ignore it. Right? They They just do so much. They hold performance,

browser fundamentals,

Open wide dev fans, get ready to stuff your face with JavaScript, CSS, node modules, barbecue tips, get workflows, breakdancing, soft skill, web development, the hastiest,

the craziest,

other other tools do as well. So this all started off with a Question from Chris m. But before we get into that, let's take a minute to talk about our sponsors and introduce,

we had the century issue page open, and we were just sort of eyes peeled watching exactly what was happening, Of that, form, cache control header. And what that does is it tells an intermediary Or, Let's, let's go through

Both to the back end as well as to the big, the front end viewing experience.

somewhat recently added to LogRocket as these tools to really gain more insight into conversion rates, it. Surface UX issues. So not only very image heavy. Think photo galleries.

CSD.

Wes Boss,

Welcome to Syntax.

Okay. So let's get into it. It. This actually came to us from a really good potluck question. Sometimes that happens where we're we'll get a potluck question that's so good. We're like, Man, we could we could spend the whole show talking about this. So this question comes from Chris m, and it says, hey, Scott and Wes. Love listening to the show overnight while I'm working in retail.

And one of the things I've been working on lately with my website has been performance and utilizing things like CloudFlare Workers to make the experience as fast as it over my end users as it's

The perfect place to see all of your errors and exceptions happen in a visual scrubbable replay, but not not just that. It allows you to really understand

user feedback. You name it, they got it. Check it out. Century.i0.

Monday. Monday. Monday.

the tastiest web development treats coming again hot. Here is Wes, Barracuda,

Sign up, and you'll get 14 days for free. Thank you so much for LogRocket for sponsoring.

This episode is also sponsored by LogRocket at loggrocket.comforward/syntax.

in addition to seeing all of your bugs. So check it out at logrocket it.comforward/syntax.

from the server to the client. However, you can override those or or do it the other way from the client to the server. So It's not really all that complicated once you realize that there's just maybe 3 or 4 a handfuls. Probably the stale while we're validate and the max age divided by 60 is 24 hours. There you go. So that is a one day Exactly. I came up with that for my Svelte calculator, so if you want.

and directives are essentially Actually, sorry. I have right underneath it nonstandard.

how you want to describe how long the cache should be or when it should When it is stale or if it is immutable, we'll talk about that. So there are cache control response directives.

Stuff will happen So a, it reduces the load on your server, b, it reduces bandwidth used, like we talked about, and then, c, probably the biggest one is the client speed, that will, if, Downloading.

That means they are set on your server and sent To the client sent to the browser,

and then there are cache control request directives. I'm going to say that most of your cache control I specifically use it to track all the bugs that I have on all my own websites. So I we just recently launched a whole big update,

are probably the 2 biggest ones that you'll you'll wanna start using. Yeah. And it. Like like we mentioned, I mean, caching can just be a a huge performance boost, and you might be spending a lot of time

Elsewhere trying to get your your code to be faster to run more performantly for your users and at the end of the day if you're not implementing some of these

to the web platform overall, then, you might be missing out on a a huge opportunity to see some major Perf gains. You know what I always say?

there are resources on that website That don't necessarily have to be redownloaded and reparsed and all that kind of stuff. So I I The max age of this thing is one day, and I only There's this is a big the big one that everybody's all excited about, and it's stale while revalidate.

making everything as fast as possible

how long things are cached? And luckily, there are standards for that.

Meaning that not to mess with the original files. So there are some CDNs, like, I think Cloudflare is a big one. I don't know if they

So the the question we have now is how do you, specify You will get the stale version, meaning that it has been generated And both the request as well as the response can have Additional pieces of metadata header on that. And if they respect those headers, then they will not. They'll just pass the raw image or the raw asset through to you. Interesting.

if you visited a website before, Yeah, of something, Hold on. Let's do the math. So divided by 60, a episode of Syntax. It would just automatically show up the next time somebody visits the website because it was regenerated.

That's generally referred to as a public cache because that's, like, that's stuff everybody can have, whereas,

All that work doesn't necessarily have to be replicated There's also a CDN level. So you go to your, Let's say you want a list of dogs. You hit you hit your server for endpoint forward slash dogs dot JSON.

Later, if they're not changed, to make that operation faster in the future. And do you use the cache control to specify whether they should be cached in Redis, or is that a different it. Approach.

your server is gonna generate that,

So we we do well, we use a plug in for it. So I honestly don't know how it works under the hood. In fact, we just give it a time to live. So that's actually, like, a big thing in caching as you'll often see. TTL, which means time to live. How long should this thing live before we regenerate it and grab a new version of it and spend the resources to get that new version of it? So TTL,

Time to live. And, and and time to live is in seconds, And just don't truly understand some of the things

And that's what caching is, is that we will put it in a bag somewhere but I definitely will laugh at a cream And that's kind of cool because, like, that makes people use, like, style dot 1.1.2.

it. Server as well. I mean, we cache a lot of our server stuff automatically in Redis, which is like an in memory cache. It. So, you know, even in that that that degree, like, caching, like you mentioned, is really just saving things for the the owner of the agency was basically like, at the end of the day,

Should you want that resource a second time.

Whether that work is that the server needs to go to the database and get it, whether that work is your phone needed to download a huge image of a dog.

And there's a couple different, like, areas of cache control. There is a browser level cache, so, So Go through them all because you can obviously read through the list. We're just going through the ones that are probably Serve up the old list of the dogs And with that, as soon as we'd launch that sucker,

which can feel kind of obnoxious sometimes. Right? We we have a a lot of seconds you're having to calculate. So it. Actually, I'll I'll link this in the in the show notes. I made a a quick little little time to live calculator in Svelte in the Svelte REPL that you can just, like, type in, Oh, I wanna cache this for 5 days or 2 months or whatever, and it just gives you the amount of seconds in that. So I'll make sure that's linked up. So benefits of a cache,