How To Avoid Big Serverless Bills

as you all probably know by now versel and I broke up I still use them for a lot of the things I'm shipping but they are no longer a channel sponsor that means I can talk about things they might not have wanted me to talk about in the past and today we're talking about a big one how to not have a crazy versell bill I see a lot of fear around how expensive verell is and these terrible bills that float around online I've had the pleasure of auditing almost all of them as in I've Doven into code bases that caus these huge bills and I've learned a ton about how to use Rell right and more importantly the ways you can use it

wrong so I did something I have not done before I built an app to Showcase just how bad things can be I did all of the stuff that I have seen that causes these big versell bills and we're going to go through and fix them so that you can find them in your own code base and prevent one of these crazy bills as I mentioned before verell has nothing to do with this video they did not sponsor it but we do have a sponsor so let's hear from them really quick [Applause] [Music] [Applause]

[Music] [Applause] this seems like the most innocent thing in the world you put a video in the public directory you put it in a video tag and then you go to your website now the video is playing this is great right totally safe fine except that for CS infra is expensive for bandwidth I know people look at it and then they compare to things like hetner and they're like wow versell charges so much for bandwidth the reason is everything you put in this public directory gets thrown

on a CDN and good cdns are expensive the reason you'd want things on a CDN is because stuff like a favicon which is really really small is really really beneficial to have close to your users even Cloud flare has acknowledged this when they built R2 because R2 despite being cheaper to host files is much much slower than the CDN here because of that putting stuff in this folder is expensive and if it's something that you can't reasonably respond with in a single like chunk of a request it

shouldn't go in here my general rule is if it's more than like 4 kilobytes do not put it in here if you want the easiest thing to put it in we'll have a small self plug throw it an upload thing I'm going to go to my dashboard we're going to create a static asset host create app files upload go to the public folder grab drop upload now all I have to do copy file URL

go back here and just swap the source out that's it we just potentially saved ourselves from a very very expensive bill because we don't charge for egress on upload thing so instead of potentially spending thousands of dollars go drag and drop it into upload thing and spend zero instead you can also throw it on S3 or R2 or other products all over the internet but this is the one we built for next devs and it makes avoiding these things hilariously easy on the topic of assets though there

is one other Edge case I see people coming into and I made a dedicated example for this this page grabs a thousand random Pokemon Sprites and there's a lot of them and they take quite a bit to load this is doing something right that I think is really really important we're using the next image component and this is awesome because if we were using our own images like we had put in public instead of serving the 4 megabyte Theo face this could compress it all the way down to like three kilobytes depending

on the use case but the way that versel bills on the image Optimizer is really important to note by default on a free plan on versel you get a th000 image optimizations by default but then they cost $5 per thousand you get 5,000 for free on the pro tier but that $5 per thousand optimizations that's not cheap and we made a couple mistakes in this implementation one is that we are just referencing these files that are already really small the ones we're grabbing from this GitHub repo poke AP API these