Abnormal bandwidth usage and cache settings

Support
1

Hi,

I have created an account 7 days ago, built a small static (next.js) website with only a few pages and a hero video on the homepage. Netlify bandwidth shows already at 17 GB/100 GB. This is insane knowing that the only visitor has been me.

website: [REDACTED]

In my network tab I can see, as an example, that the video keeps being downloaded without ever being cached. Status 206. So I think there is a caching problem somehow. I have not overridden Netlify’s headers and haven’t configured any custom ones in a netlify.toml file. All files are hosted on Netlify with no other CDN being used currently.

There must be an obvious problem somewhere here. But 17GB after few days and only 1 user does not leave me with much confidence for when the website starts to receive traffic. Can someone please help?

Many thanks.

2

Got it to work by adding the following into next.config.js:

const headers = {
  headers: async () => [
    {
        // list more extensions here if needed; these are all the resources in the `public` folder including the subfolders
        source: '/:all*(svg|jpg|png|mp4)',
        locale: false,
        headers: [
            {
                key: 'Cache-Control',
                value: 'public, max-age=31536000, stale-while-revalidate',
            },
        ],
    },
],
}

and exporting this in the same module.

module.exports = 
  headers,
  otherConfigs,
);

I also found that you can place a _headers file into the public folder targeting specific files like so:

/YourMedia.mp4
 Cache-Control: public, max-age=31536000,stale-while-revalidate'
3

Thanks for circling back and sharing your solution!