You Need Stale While Revalidate

s Dash is a weird rendering or a download of hitting an API that is really slow. So all of those things can happen

Like, super or something.

Another one is you can Sorry. Yeah. Sorry. Let me even just hop in there too to make things a little bit clearer for people who don't have any experience with caching. Think about images. Right? You have a a big old image.

And if you download that image once,

I mean, they're pretty simple.

Imessage, Like it's got to take longer than that to propagate. If you've got a CDN network, Page that takes 800 milliseconds

a use case where one second is not long enough

back and forth. One second could be for the newest shows, right? Because there was no like cron that would automatically populate it. So what was happening? But we didn't want every time you visited the website, we didn't want the person to say, You could cache

The caching doesn't really matter if it's rendering fast enough and we need to cache them so that Once you take the 15 seconds to generate it, they're going to be loaded instantly after that. However, Stuff? Stuff.

you know, or you're doing like a Zendesk They're logged in state to the next user that comes because you said this is a shareable cache. So you kind of have to be careful with that because you have to think, okay, would make a lot of sense.

or sorry, is too long like examples.

There's there's stuff. Yeah. Yeah. It's true. May maybe there is, like, You're paying the bill to generate all of those. So it often makes sense to just generate it once

kind of annoying to get that type of thing. And in that case, If you already have it downloaded into your browser

for up to 10 minutes past that,

So the browser goes back to the server and says, Hey, I need a new one. This is a stale It's okay to serve the stale one up, right? This is stale bread. You can still eat it for the next day or so, but we should probably make some more, you're on the 4th 2nd.

this is good for a minute, Say still while revalidate

Right? So stale while revalidate will just that if you get 100,000 people a second, that's 300,000

but after 1 minute, that is that asset is considered stale.

So in the example of the Syntax Open Graph images, Oh, but then I have the dev tools disabled cache on There We Go. Yes, it does. So

Stale while revalidate will do is you can say, Okay, And you can tell that pretty quickly by I guess we could go to the the syntax website or go to the syntax. Fm/og

say, Oh, oh, shoot. Okay, doesn't need to happen all the time.

10 seconds to generate the image,

always needs to be there. And in that case, yeah, you probably

Yeah. Or just somebody. Right? on everything?

Scores TO Users? Yes.

And you load the site. You want the scores

If you were to be serving up

you know, you're you're gonna be Finding alternative caching methods or caching for much less time. Yeah. Maybe even, like, on the seconds. I I've I heard that, you know, you probably don't wanna use this Old stale data.

You're going to probably not want to serve stale content to those people.

served. Like, if you go to, like, espn.com

Then at that point,

Content that's updating really quickly, like like sports scores that need to be

to I think the reason why that metaphor is perfect because it also

up to date all the time, so you're probably not gonna wanna serve stale doesn't really change that much. You know? You can think about it. If you have a CMS, Caching

Somebody of highest importance. The the bread must be at its very best. This bread must be perfect.

The fresh content

stale bread Oh, yeah. S dash is better because it's on the CDN. In in that regard, if you wanted something cached for both of those, Would you use both of those headers, Wes, or just 1 or the other? That's a good question, actually.

So there are instances where

your eBay, you're logged in and you see all of your account details.

whereas SMAS Max Age, the S stands for shared, And in that case, you also need in that generation, meaning that You're getting one second old content, which might be okay, That's not uncommon. Right. Lots of people watching hockey. Lots of people refreshing wanting to know the score which you visit a website and then you go back to that website later.

If you accidentally s Max age somebody is like logged in state, that when visited.

Basically, it's how many seconds you want this thing to be cached for before,

But, like,

and that will tell

to share this between multiple people. So one possible I've seen this a couple of times security issue is

Or the CDN goes off and gets a new version of it. And the difference there between the the 2 that Scott just said is max age is going to be cached on your browser, the fresh version is worth waiting for.

like, let's say it's itself can respect those cache headers.

the browser

and it can just serve up

data

oftentimes

You update some data. Right? It can cause some problems. You might need to know what's going on. But more importantly,

If you think about caching as a whole, just a concept, what you're doing is you're basically saving that information

And you're serving that same data to a lot of people.

The already saved data typically could be saved in memory, could be saved in your browser's cache.

So that way when someone else requests it, it doesn't have to do the expensive operations,

And whether it is caching your your server response or your data.

So, yeah, it's not something that I would just I don't know. Like, Should you throw it on anything? Everything

sriracha at this point or something or whatever people just like to put on everything.

It's still the difference between a couple 100 milliseconds and 0

for me? I really feel like it's to be exactly

enough traffic to kick off those next renders If you don't have enough traffic in the example of the syntax website that I gave you, and then

I'm sure that

a couple of milliseconds or 100 milliseconds or whatever to generate the site. It wasn't really that long, but

I think we had to get our food metaphors in. Exactly. We got it.

Head on over to syntax.fm

464.

Stuff. So listen to that, but I thought we we should go entirely in-depth Then you're just sitting there waiting for the site to generate. And it only took within this many minutes.

So go to syntax. Fm/464.

You can listen to the episode Cash control headers explain.

We go through all of them.

the different caching headers, which is episode

or drop a review if you like this show.

the next 10 minutes? Max age? that data to be cached for too long for. Yeah, right. For absolutely everybody. Right. If it's the same database query or even if you if you only cache it for 1 minute, you know, that's you can do that.

the old version for

And don't forget to subscribe in your podcast player If you're, you know, caching anything, you gotta make sure you have some error and exception handling traffic on your your services

for a full archive of all of our shows,

Tolinski.

We're gonna be serving you up some stale,

Monday. Monday. Monday. Open wide dev fans. Get ready to stuff your face with JavaScript, CSS, node modules, barbecue tips, get workflows, breakdancing,

Welcome to Syntex. On this Monday, hasty treat.

Boss, and Scott, El Toro Loco,

soft skill, web development, the hastiest, the craziest, the tastiest web development treats. Coming in hot. Here is Wes, Barracuda,

And then that's gonna load fast for people

CDN eyes a lot of your assets So

Let me throw a copy in Boston, I would think I asked Chat GPT, it says yes.

And they'll say, all right, well, you generated this Open Graph image. Let me go throw a copy in Australia.

you had said a cache can be in 2 places on the browser or a CDN. I just wanna make sure that that's clear. They can all stop by yeah. I'm talking about, like, the actual cache header. So you're right. Your server

Stuff. Just, Yeah. I know. I well, that's my biggest question is is, if you have something like centuries

all around the world. Yeah. Well, they can also be a cache can also be on that just a straight up server too.

I guess, why would I just not use this all the time? Because it feels like I want to. Yeah.

If you were And then it'll kick off a background task that nobody is sitting around waiting for, and it will regenerate a new version. And then you come back

to cache that data Interesting. For absolutely every but you could Just cash it on the on the user's client as well. Word. Cool. Yep. That's it. I thought that's I told Scott this would be a 10 minute episode, but here we are 22 minutes in.

if you had, like, a, like, a Twitter or a YouTube where you have, like, the header and If you if they cache that on a CDN,

that takes some time.

And if you cache it, It stores that image on your computer. So the next time you click refresh on that web page, it's not having to go off and repull it down. It's just there. It already exists.

Now people are getting stale content, we needed a way to regenerate the website just for stale while we're validated. Yeah. Absolutely. I love it. Alright. Peace.

Sometimes But generally what you're doing is, yeah, you're sticking a CDN in front of it. Yeah. Sorry. I was also speaking on a cache broadly rather than. Oh, yeah. Yeah. I'm more thinking about like like a cache header here where if it is cached.

to be cashed, and they kick off whole thing where you invalidate your cache. So those are the 2 examples we'll refer to this, Next person comes along. They get your

the scores for 3 seconds And that's a security issue there. So certainly be careful. Don't just think, oh, to do database query.

We had a one second stale while we validate on it. Why? Because Another reason for a cache is you might limit how often you're allowed to hit an API. So if you have between 8 and 15 seconds, depending on if the Headless browser is hot or not. Basically, I Now enter stale while revalidate, right? forward slash 600.

But it's only 4 seconds old, and there's been a background thing kicked off to regenerate but Another use case for caching is you can put the caches closer to your users. So, If you want that to be cached for some amount of time, the one that you you generated

a generation for the next person then stuff? It's either I don't even wonder. I think probably like your ISP might even And the idea with this is it tells the It really has to do with like how much traffic you're getting with the syntax website, the old syntax website.

the latest version of it. So you're regenerating a new version And you are never going to be sitting around, sitting on your hands waiting for in the background is quite a bit.

Correct.

and then.

And just in case there's a new episode. So what we did is

in one second. Right.

A 100,000 traffic visitors cached both by your browser as well as,

and the next person. So you're always kind of off by 1

requires information to be up to date. My name is Scott Talinski. I'm a developer from Denver. With me, as always, is Wes Bos.

which is a caching technique that

to really improve

overall speed

And really make life easier on you when you're trying to get some caching down that, well, still and use the coupon code tasty treat, all lowercase and all one word. You'll get 2 months for free. All right, so let's talk about the stale while revalidate.

takes and then revalidating them. So we're gonna be talking about stale while revalidate,

is really pretty simple to add to your projects replay where you can see

is it will both be respected by the CDN as well as the client. But let's pause a second, double check that.

I'll tell you this. I've never set both of them on a single response, and I've done this a lot. So I would assume so The Max, Or you might be doing something expensive, such as

that it would be it has, like, notifications in it, Like you probably don't want to cache that because now you're spending CDN space We put a one second still while we validate on it, meaning that you visit the website, you get the cached version, but you immediately kick off a regen for the next person.

that requests that are being served up as cached. And then once you get over that 3 seconds,

S Max Age will But tweet us at Syndax FM if you have This is a header which you're probably thinking I don't need a podcast about headers. This is such a cool header. You're going to want to listen to this one, and you don't want to have to be dealing with with caches? let's say every 3 seconds your CDN. It is okay is that

So again, if you're.

Which makes sense because you're you're not spending the bandwidth to get to the CDN S Max age If I'm saving a copy of this user's rendered out, Akash can live in 2 spots. It can live on your computer,

In your network tab, Second 1 is the open graph images on the Syntax website.

cache it both at a CDN level as well as at a browser level.

the use case Yeah. That way expensive operations don't get run more than they need to. Exactly. Like, you you might have a the queen

But if I'm serving up a stale version within this many minutes, I'll go make a new one so the so we can have fresh.

But, you know, you gotta feel like it it has some degree of accuracy there because

in which stale while revalidate

probably isn't a good idea.

kept the browser around so that if you come your assets or you use something like Cloudflare or Vercel.

it takes about

If you try to generate another one, like 10 seconds later, the browser's already started up and that that'll cut 5, 6 seconds off of everything.

Every time we generate an Open Graph image, see

generating images. So

and maybe, for example, you might only be allowed to hit an API 30 times an hour, But what if that was 0 milliseconds

or like Scott said earlier, you could also just have like an object or a key value database. But that's not really what we're talking about here. Talking about that, the actual outputted header.

So you might have to cache it might even do caches as well. I would think so. Yeah, it's a question. We should ask the Cloudflare folks that. They would probably know that. Hey. I got a an interesting sidebar question. Yeah. You know when they have, like, Movies on an airplane that are stored onto a hard drive. Do you call that a cache? Oh, yeah. For sure. Yeah. That's a, like, a local cache where it's sitting in. Like, Like lots of ISPs have Netflix caches, right? Yep. So they don't have to go all the way to Netflix to do that.

in there because then you have to have a whole stale if error. That's another one is like, Well, what happens if it breaks? Are you allowed to give them

a while to generate

But you, the listener, can think of any time you want a cache.

like we're constantly changing the names of podcasts. And like, you don't want there'd be some You could put like a let's say we put a 1 minute

those take why? Scott, you wanna grab the first one? Why might you want to cache something? you could possibly and that will give you the actual rendered out open graph image. And then you can look at it

it's total seconds. Right? That's how what a Max Age is said too? Yeah. It's It's it's one of the few things that are seconds based. Yeah. I know. I wanted to say milliseconds, but then I've made a max age calculator for myself because I was so annoyed with having to calculate it out all the time. Yeah. And so I'll post a link to that. I made it in Svelte if you wanna see it.

serve up the cash version. Yeah. Well, okay, let's get into then

is a is it is it

just straight up normal caching headers, which you typically see in just as max age or s Max Age. And that basically

How long it's okay to but you're also getting it instantly because you somebody else kicked off the generation for you That that's been cooked beforehand. Why wouldn't you just toss stale while revalidate Alright. Well, I got to sit here and regenerate the whole website.

client

reuse or serve up a stale asset.

then you might Want to dip into using the stale while revalidate header. So

Yeah. Well, the thing is with caching is

So, head on over to century.i0

But before we get into the contents of this episode,

getting some potentially cached or incorrect

because, hey, Sometimes that cash can get in the way for some reason.

what the user's getting on their dashboard. You can even see if they were accidentally

For the purpose of this podcast, we'll talk about

That HTML page needs to be cached so that be serving up for you. Do you really need to sit around and wait for cash and have this like off by one error? and we're going to explain, first of all, like like why you might need it and then and then how it works. So

First, one of them simply just being an HTML page the database queries, the rendering, all that stuff that needs to happen on the server I think the way that you said it is it makes sense.

So the next time somebody comes, I'm going to have a fresh one for them. And then I've renewed the max age on there. So what it does is it kicks off a background task after another 3 seconds. So what is happening? ESPN gets

revalidate says. Keep it for this long and it's okay to serve a stale version all I got is this stale JPEG get fast reloads,

while you're waiting for it. And that's what the stale for 2 minutes. Otherwise you're going to run out of API hits, right? You can't be hitting at every single request. So it's good to You can either cache like the output 2 then

a database query that is slow to resolve or Your like Scott just said, you don't have to redownload that, but it can also live on a CDN But also, like, with the let's say ESPN, let's say if you have a CDN like Vercel or Cloudflare and they've got 50 locations, you know, How long does it take to take that HTML file and propagate that through the world? So I don't know if the one second would be ideal in all of those cases because you have to literally wait for it, but image,

instantly. So the idea is, and this is the same with like a React website that would be rendering,

and it doesn't make the user it gives you the stale version immediately, which is often fine.

A minute later and you've got the new version and then you got to wait another 15 seconds.

If you visit a page, you might be getting stale content, but you should know that in the background for however long and then

so you can put a CDN in front of We were hitting asset, whether it is an HTML page, an image, some JavaScript, some CSS.

They will automatically PNG of the the open graph image. You can have it for now because it's still fine. They said it would be fine for the next 10 minutes. It's okay. But It's okay. I'm going to go out back and make a new one.

Then you give it a stale value.

you give an access a Max Age header. That is how long the asset is good for.

even even a minute then the next person that comes along is going to see the wrong logged in state.

some issue. And also, like, the one second example, if there wasn't enough traffic for somebody to kick off the next regenerate,

is a technique used just about in every single facet of

You're often needing

to save things for later so that they're easily accessible.

computer science. Right?

because stale while revalidate is a header that you set on your responses, They are.

That's a good question. Like, first of all, you might not be getting that much traffic max age on there. So every time for the next minute you refresh the page, You're going to But if you think about that, like, oh, I'm generating hundreds of thousands of these for every single request.