Vercel data usage from Next.js app resources download
Answered
West African Lion posted this in #help-forum
West African LionOP
Hi,
I'm not the best when it comes to architecture, and I was wondering how I could handle resources to avoid reaching limit on the Fast Data Transfer category (and maybe others?).
My next.js app comes with a Phaser game, which involves dozens mbs of data (maybe it will be a few hundreds at some point) to load. I have checked the usage page, and I have a day with 300mb+ usage, knowing that it's not even public yet. I guess it comes from my tests where I emptied cache several times.
It then makes me wonder how this stuff should be handled, because I would hit the limit very quickly with people trying to play. Idk if something like Redis or whatever could be relevant (as I said I'm not that good in architecture), or if there's an efficient caching method I'm not aware of for this kind of situation
I'm not the best when it comes to architecture, and I was wondering how I could handle resources to avoid reaching limit on the Fast Data Transfer category (and maybe others?).
My next.js app comes with a Phaser game, which involves dozens mbs of data (maybe it will be a few hundreds at some point) to load. I have checked the usage page, and I have a day with 300mb+ usage, knowing that it's not even public yet. I guess it comes from my tests where I emptied cache several times.
It then makes me wonder how this stuff should be handled, because I would hit the limit very quickly with people trying to play. Idk if something like Redis or whatever could be relevant (as I said I'm not that good in architecture), or if there's an efficient caching method I'm not aware of for this kind of situation
Answered by Anay-208
Summary:
- You wanted to reduce your costs
- Your files are having a large size
- I suggested you to use cloudflare r2, and optionally, use workers to add image optimization.
- to make sure you don't get costs from vercel, use a custom loader for
- You wanted to reduce your costs
- Your files are having a large size
- I suggested you to use cloudflare r2, and optionally, use workers to add image optimization.
- to make sure you don't get costs from vercel, use a custom loader for
next/image43 Replies
@West African Lion Hi,
I'm not the best when it comes to architecture, and I was wondering how I could handle resources to avoid reaching limit on the Fast Data Transfer category (and maybe others?).
My next.js app comes with a Phaser game, which involves dozens mbs of data (maybe it will be a few hundreds at some point) to load. I have checked the usage page, and I have a day with 300mb+ usage, knowing that it's not even public yet. I guess it comes from my tests where I emptied cache several times.
It then makes me wonder how this stuff should be handled, because I would hit the limit very quickly with people trying to play. Idk if something like Redis or whatever could be relevant (as I said I'm not that good in architecture), or if there's an efficient caching method I'm not aware of for this kind of situation
Forest yellowjacket
do you have the 20$ /month option already? I think that has higher caps across the board; I think they intentionally set the free caps low. I had to shell out to power my vercel based take home project.
@Forest yellowjacket do you have the 20$ /month option already? I think that has higher caps across the board; I think they intentionally set the free caps low. I had to shell out to power my vercel based take home project.
West African LionOP
I'm still on the free plan, however the pro plan is like 1Tb per month which is "only" 10x higher. It is good for apps in general I guess, but an embedded game can make the usage rise pretty quickly. If I'm able to use over 1Gb during the month on my own, I guess there's something else to look for
@West African Lion Hi,
I'm not the best when it comes to architecture, and I was wondering how I could handle resources to avoid reaching limit on the Fast Data Transfer category (and maybe others?).
My next.js app comes with a Phaser game, which involves dozens mbs of data (maybe it will be a few hundreds at some point) to load. I have checked the usage page, and I have a day with 300mb+ usage, knowing that it's not even public yet. I guess it comes from my tests where I emptied cache several times.
It then makes me wonder how this stuff should be handled, because I would hit the limit very quickly with people trying to play. Idk if something like Redis or whatever could be relevant (as I said I'm not that good in architecture), or if there's an efficient caching method I'm not aware of for this kind of situation
If I were you, I'd get a VPS with unlimited/high data transfer for it.
Depending upon number of requests, I'd just invest around $10-$15/month on a 4vcpu 4 GB RAM server
Depending upon number of requests, I'd just invest around $10-$15/month on a 4vcpu 4 GB RAM server
Its my suggestion, because vercel would be too expensive otherwise
@Anay-208 If I were you, I'd get a VPS with unlimited/high data transfer for it.
Depending upon number of requests, I'd just invest around $10-$15/month on a 4vcpu 4 GB RAM server
West African LionOP
As I said not an expert, so I'm trying to clarify: are you talking about a virtual private server, like a Linux VM or something hosted on OVH or similar, so I can store resources there and make them load ? Tbh I'm absolutely not aware of the availability it provides, be it on storage cost or request limit, transfer and so on.
Also I was wondering if there was something to do with either Redis on Cloudflare, or something else. What I say may not make sense but I haven't worked with any of these so just exploring
Also I was wondering if there was something to do with either Redis on Cloudflare, or something else. What I say may not make sense but I haven't worked with any of these so just exploring
@West African Lion As I said not an expert, so I'm trying to clarify: are you talking about a virtual private server, like a Linux VM or something hosted on OVH or similar, so I can store resources there and make them load ? Tbh I'm absolutely not aware of the availability it provides, be it on storage cost or request limit, transfer and so on.
Also I was wondering if there was something to do with either Redis on Cloudflare, or something else. What I say may not make sense but I haven't worked with any of these so just exploring
VPS/Linux VM. anything will work.
In some providers, you just pay a 1 time cost for the whole month, and no additional charges, unless you are scaling up
In some providers, you just pay a 1 time cost for the whole month, and no additional charges, unless you are scaling up
disadvantage is that its not that scalable, unless you enable autoscale from a provider like digitalocean
@Anay-208 VPS/Linux VM. anything will work.
In some providers, you just pay a 1 time cost for the whole month, and no additional charges, unless you are scaling up
West African LionOP
Alright I see. What I don't get then is what would be the point of a service like Cloudflare if a VM does the trick ?
@West African Lion Alright I see. What I don't get then is what would be the point of a service like Cloudflare if a VM does the trick ?
Cloudflare is a DNS Proxy, protecting for attacks, and VM is a machine, where you can host your server
@Anay-208 Cloudflare is a DNS Proxy, protecting for attacks, and VM is a machine, where you can host your server
West African LionOP
Ha, I thought it was used to store data as well
Yes, you can use it to store data
You can use cloudflare to store data, and vm to serve data
Because I would never use vercel for this case, as I'd go bankrupt
@Anay-208 You can use cloudflare to store data, and vm to serve data
West African LionOP
Not sure wdym there.
As let's say for example I have in my Next.js app something like
My guess was that I would just have to replace with something like
Hence why it wasn't clear what the VM role would be
As let's say for example I have in my Next.js app something like
load('myImg', '/path/to/image');My guess was that I would just have to replace with something like
load('myImg', 'https://cloudflare.something.com/myFile')Hence why it wasn't clear what the VM role would be
@West African Lion Not sure wdym there.
As let's say for example I have in my Next.js app something like
load('myImg', '/path/to/image');
My guess was that I would just have to replace with something like
load('myImg', 'https://cloudflare.something.com/myFile')
Hence why it wasn't clear what the VM role would be
Oh wait, you want to fetch a file from cloudflare
can I know the file type?
West African LionOP
Idk to be honest I just wanted to avoid fetching everything via Vercel, just to prevent huge costs
@Anay-208 can I know the file type?
West African LionOP
mostly .webp files. Some pngs
@West African Lion Idk to be honest I just wanted to avoid fetching everything via Vercel, just to prevent huge costs
So fetch in the client side(if the data isn't sensitive)
@West African Lion mostly .webp files. Some pngs
So use a custom loader
instead of vercel image optimization
and use cloudflare for image optimization
West African LionOP
I'm already not using Vercel image optimization I guess. But still images are on the public folder of the app, so it has to be transferred hence the cost right ?
Phaser is client side anyways so it's just fetching images via basic network requests
@West African Lion I'm already not using Vercel image optimization I guess. But still images are on the public folder of the app, so it has to be transferred hence the cost right ?
If images are on the public folder of the app, then yes, you'll get costs
I recommend using cloudflare r2 for storing images, it has 0 egress costs(data transfer costs)
For stuff relating to costs, I've done a lot of research in the past with the goal of minimizing it
@Anay-208 I recommend using cloudflare r2 for storing images, it has 0 egress costs(data transfer costs)
West African LionOP
So is this a service where you basically pay a fixed amount to store X amount of data, then you can just retrieve them via URLs like I mentioned previously, and you're done?
@West African Lion So is this a service where you basically pay a fixed amount to store X amount of data, then you can just retrieve them via URLs like I mentioned previously, and you're done?
In cloudflare r2, you pay for:
- storing data
- adding data
- fetching data
- storing data
- adding data
- fetching data
West African LionOP
Ha you said 0 egress costs so I thought it was free to fetch any amount of times
@West African Lion Ha you said 0 egress costs so I thought it was free to fetch any amount of times
You only pay for each file you fetch
And first 10M are free
West African LionOP
I guess I must clarify what egress costs are then
Cloudflare r2 does not charge any egress costs
@Anay-208 Cloudflare r2 does not charge any egress costs
West African LionOP
Yeah I meant that I didn't know about "egress costs" term until now.
So aside from that, it seems like I should be grouping images together, to reduce the number of requests ? In an ideal world I could even have a few files and it could be requested a million times 🤔
So aside from that, it seems like I should be grouping images together, to reduce the number of requests ? In an ideal world I could even have a few files and it could be requested a million times 🤔
egress Costs are basically data transfer costs
West African LionOP
Alright so ingress is when I upload my data and egress is like downloading them to either move them somewhere else or just retrieve them right? Or maybe is it just transfering and not retrieving idk
egress/ingress whatever you want to call, uploading and downloading have just a fixed cost, regardless of the file size
West African LionOP
Awesome; I'm gonna dig a bit more into cloudflare and such then, thank you!
Summary:
- You wanted to reduce your costs
- Your files are having a large size
- I suggested you to use cloudflare r2, and optionally, use workers to add image optimization.
- to make sure you don't get costs from vercel, use a custom loader for
- You wanted to reduce your costs
- Your files are having a large size
- I suggested you to use cloudflare r2, and optionally, use workers to add image optimization.
- to make sure you don't get costs from vercel, use a custom loader for
next/imageAnswer
if your issue is resolved, mark the above message as a solution