Iāve noticed that while developing and refreshing my local site, a significant portion of my clientās bandwidth is being consumed. Iām concerned about exceeding the bandwidth allocation during development and testing phases.
Is there a recommended approach or workaround to minimize bandwidth usage while in development? For instance:
Does DatoCMS offer caching options or local APIs to reduce requests?
Is there a way to use a local copy of content for development purposes instead of continuously querying the live API?
Iād appreciate any guidance or best practices you can share!
Is there a particular project youāre thinking about? If you could please send me the project URL and the website frontend URL, I can take a deeper look for you? (You can either just post it in a reply, DM me here, or send an email to support@datocms.com and mention this thread). I took at look at the projects associated with your email but did not see one that was using a lot of bandwidth? Being able to see the specific project(s) youāre concerned about would let me better figure out what is using the bandwidth
But, without knowing the specifics, here are some general concepts (and again, these are just generalā¦ I donāt know if any of them apply to your project):
For other filetypes, namely images, our automatic optimizations should significantly decrease bandwidth consumption, if enabled on your projects: https://www.datocms.com/docs/asset-api/asset-cdn-settings (in technical terms, this tells our image CDN Imgix to auto-serve the best image format available to any particular browser). You can further decrease filesize (at the expense of quality) by also setting the auto=compress param.
Hot module refresh (i.e. automatic reloads during development) can indeed incur many calls to our API, but that typically results in API calls and not bandwidth. Normally browser caching should keep the files in your local memory/disk cache?
We donāt offer ālocal APIsā per se, but you can certainly cache our API responses on the frontend (and in many cases, it makes sense to do so). e.g. if youāre on Next, using the built-in fetch cache (for the app router) or incremental static regeneration (for the pages router) will help prevent re-fetching the same things from our APIs over and over again.
If your content is particularly large, you can also keep a local copy of your content (theyāre just JSONs) alongside your codebaseā¦ but that is harder to manage and synchronize vs just using built-in fetch caching in your frontend.
Itās hard to provide specific guidance without knowing the project and website youāre asking about specifically. Happy to take a deeper look there if you can share that, otherwise, I hope the above provide some good starting points?
After investigating further, I found that the high bandwidth usage was caused by Vercel building my static site. Specifically, it seems to come from AstroImage downloading and resizing large images, which consumes a lot of bandwidth. Each build was consuming 350mb.
To address this, Iāll be replacing AstroImage with the DatoCMS Astro Image component. This should transfer the bandwidth for image resizing and delivery from Vercel to the DatoCMS CDN, which should resolve the issue. If thatās not enough, Iāll tweak the Imgix and cache settings for local environment
: