Vercel free tier limits on a static Next.js hobby project with over 4000+ images pulled from reddit
Unanswered
Transvaal lion posted this in #help-forum
Transvaal lionOP
i made a dotfiles marketplace with over 4,000 rices- https://dotfiles.lol
+ community submissions through github. it has filters for window managers, distros, utilities, and even colorschemes, along with working links to each github dotfiles repository.
for some context - i don't store ANY image myself (on the repo) ; all of them are served directly from reddit's CDN. ps: there are over 4000+ unique images.
the site is built with nextjs and deployed on vercel (free tier). now so far ive only shared it with a few friends and some discord servers, and it got around 150 unique visitors (only) and I ended up hitting Vercel's free tier limits.
what should i do in this situation?
this is just a hobby project, i don't really want to pay for vercel pro ; is there a way to keep the entire infrastructure on vercel while avoiding the free tier limits, keeping the images optimized, and maintaining the project as an
ps: when i'll officially launch it, I'm expecting A LOT more traffic than this
+ community submissions through github. it has filters for window managers, distros, utilities, and even colorschemes, along with working links to each github dotfiles repository.
for some context - i don't store ANY image myself (on the repo) ; all of them are served directly from reddit's CDN. ps: there are over 4000+ unique images.
the site is built with nextjs and deployed on vercel (free tier). now so far ive only shared it with a few friends and some discord servers, and it got around 150 unique visitors (only) and I ended up hitting Vercel's free tier limits.
what should i do in this situation?
this is just a hobby project, i don't really want to pay for vercel pro ; is there a way to keep the entire infrastructure on vercel while avoiding the free tier limits, keeping the images optimized, and maintaining the project as an
awesome-* style FULLY static github directory?ps: when i'll officially launch it, I'm expecting A LOT more traffic than this
24 Replies
@Transvaal lion i made a dotfiles marketplace with over 4,000 rices- https://dotfiles.lol
+ community submissions through github. it has filters for window managers, distros, utilities, and even colorschemes, along with working links to each github dotfiles repository.
for some context - i don't store ANY image myself (on the repo) ; all of them are served directly from reddit's CDN. ps: there are over 4000+ unique images.
the site is built with nextjs and deployed on vercel (free tier). now so far ive only shared it with a few friends and some discord servers, and it got around 150 unique visitors (only) and I ended up hitting Vercel's free tier limits.
what should i do in this situation?
this is just a hobby project, i don't really want to pay for vercel pro ; is there a way to keep the entire infrastructure on vercel while avoiding the free tier limits, keeping the images optimized, and maintaining the project as an `awesome-*` style FULLY static github directory?
ps: when i'll officially launch it, I'm expecting A LOT more traffic than this
You hit pretty fast the image optimization while serving 4000+ images. Vercel free tier contains 1000 free images. To resolve the issue add to your nextjs config the unoptimized flag to your images. Like that no code needs to be changed and all images will be served unoptimized. As you using Reddit, it’s fine and they are build to handle high load
@B33fb0n3 You hit pretty fast the image optimization while serving 4000+ images. Vercel free tier contains 1000 free images. To resolve the issue add to your nextjs config the unoptimized flag to your images. Like that no code needs to be changed and all images will be served unoptimized. As you using Reddit, it’s fine and they are build to handle high load
Transvaal lionOP
yeah but my main concern is
wouldn't that be like
slow
Chinese softshell turtle
IMO its going to be slow only if the file(3-4mb and you are on a phone with 3g) is big and your internet is slow
Transvaal lionOP
another unefficient option would be to build a worker (more of a pre-commit script) that first downloads all the 4000 images off reddit's CDN, then converts each of them into webp - and then i upload the entire 4000 images dir to github
@Chinese softshell turtle IMO its going to be slow only if the file(3-4mb and you are on a phone with 3g) is big and your internet is slow
Transvaal lionOP
alright. so let's assume that at launch the traffic is going to be VERY HIGH. in that case, what other limits on the free tier am I likely to hit that I should keep an eye on?
Chinese softshell turtle
everything that uses cpu and is not cached
@Transvaal lion Click to see attachment
Transvaal lionOP
this is the current state of my limits
Chinese softshell turtle
i host on my own vps so i dont have to think about this kind of stuff
Chinese softshell turtle
i am not guru in this kind of stuff, but what if you get attacked and your ISR reads gets up to > 1m?
its basically cache reads
not to say bad word, but there are too many doors that are open for the dev to pay
Transvaal lionOP
i wanna keep it fully static
Chinese softshell turtle
i would be happy if @B33fb0n3 answer about unoptimized prop. What do we loose when we add unoptimized? Is it only for the cpu skipping?
why host at vercel? are you scared of doing it yourself? There are not many options, as i told you they make money from many sources like cpu, reads, writes...
I guess if you ask this kind of stuff that means you dont want to upgrade the plan?
I guess if you ask this kind of stuff that means you dont want to upgrade the plan?
do you have bad exp with hosting on your own vps?
Transvaal lionOP
i want to keep it fully static, and i don't really wanna buy vercel pro ; since this is a hobby project
Chinese softshell turtle
yeah then put unoptimized in next.config and give it a try. It will drop your cpu time, no more img transforms/cache writes/cache reads. It will also drop fast data transfer. If you have proxy.ts thats where edge requests come from(thats what i think, not 100% sure)
thats how much i can help for now
@Chinese softshell turtle i would be happy if <@301376057326567425> answer about unoptimized prop. What do we loose when we add unoptimized? Is it only for the cpu skipping?
We would lose the fast image load if the images are pretty big. If they are small (and I expect that from Reddit) then we won’t lose anything (as the speed is there though Reddit)
@Transvaal lion i want to keep it fully static, and i don't really wanna buy vercel pro ; since this is a hobby project
Having such a website with such a lot of traffic doesn’t sound like a hobby project anymore tbh.
But to keep your costs low the unoptimized flag is the thing. If you still hit limits with images, then service through a proxy CDN. I like to use bunnyCDN. Costs are very very low and the performance and speedup is perfect
But to keep your costs low the unoptimized flag is the thing. If you still hit limits with images, then service through a proxy CDN. I like to use bunnyCDN. Costs are very very low and the performance and speedup is perfect