Vercel free tier limits on a static Next.js hobby project with over 4000+ images pulled from reddit
Answered
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
Answered by B33fb0n3
@Transvaal lion to conclude this thread you'll move the site to CF pages, serve directly from reddit, cache image responses a lot (as you said 1 year) and like that it should be solved. If so, please mark solution[: ](https://cdn.discordapp.com/attachments/1043615796787683408/1117191182133501962/image.png?ex=6a69135e&is=6a67c1de&hm=ec164652e6e381364ac0fb332c6a7a150fcb07dc4304dac31467d35c0affae86&)
42 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
Yellow Wagtail
I can suggest a workaround. You can manually optimize the image with
I think there's already a package that does it. I'll let you know if I find that.
sharp and serve it.I think there's already a package that does it. I'll let you know if I find that.
@Transvaal lion i want to keep it fully static, and i don't really wanna buy vercel pro ; since this is a hobby project
Yellow Wagtail
If you want to make sure everything on your site is fully static, you can use
Also, set
If you ever need to clear this long term cache, trigger a purge via
generateStaticParams to cache dynamic pages at build time. (https://nextjs.org/docs/app/api-reference/functions/generate-static-params)Also, set
export const revalidate = Infinity. It'll cache the page until you purge it manually. (https://nextjs.org/docs/app/guides/caching-without-cache-components#route-segment-config-revalidate)If you ever need to clear this long term cache, trigger a purge via
revalidatePath() or revalidateTag().French Lop
My piece of 🍰 , I use cloudflare R2 and a sharp image converter for more flexability in the transformations I use on my sites. Then I attach a domain in cloudflare to the bucket and cloudflare then works as cdn for you. This is free up to a certain amount of gb and requests
The requests to the cdn dont count for your ingress requests of the buckets so thats cool
@French Lop My piece of 🍰 , I use cloudflare R2 and a sharp image converter for more flexability in the transformations I use on my sites. Then I attach a domain in cloudflare to the bucket and cloudflare then works as cdn for you. This is free up to a certain amount of gb and requests
Then I attach a domain in cloudflare to the bucket and cloudflare then works as cdn for youis it posssible, to use s3 as bucket (not r2)? Because free cdn sounds good for me
French Lop
Im not entirely sure. When i go to my r2 bucket in clpudflare it just has an option to add a public domain and the rest is done for you
Chinese softshell turtle
@French Lop beware of the head request attack. You can go check if the cache status is dynamic with head request
@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
optimize it, make some heavy caching. also maybe host it on some small cheap vm like ovh, hetzner or if you're eu based datalix
@French Lop My piece of 🍰 , I use cloudflare R2 and a sharp image converter for more flexability in the transformations I use on my sites. Then I attach a domain in cloudflare to the bucket and cloudflare then works as cdn for you. This is free up to a certain amount of gb and requests
Transvaal lionOP
im thinking of serving images straight from the reddit's CDN
initially i thought of downloading all the images (10000+) locally and then using sharp
and uploading all that to r2
@Transvaal lion im thinking of serving images straight from the reddit's CDN
Transvaal lionOP
now my current strategy is-
cloudflare pages + serving images directly from reddit's CDN + im gonna cache all the images for a very long time ; like an year or something
@Transvaal lion to conclude this thread you'll move the site to CF pages, serve directly from reddit, cache image responses a lot (as you said 1 year) and like that it should be solved. If so, please mark solution[: ](https://cdn.discordapp.com/attachments/1043615796787683408/1117191182133501962/image.png?ex=6a69135e&is=6a67c1de&hm=ec164652e6e381364ac0fb332c6a7a150fcb07dc4304dac31467d35c0affae86&)
Answer