Search code examples
firebasenext.jscache-controlfirebase-app-hosting

Firebase App Hosting Cache-Control (NextJS)

I'm trying to set cache-control of one year for all of my files which is hosted in Firebase with the new App Hosting service (I'm new to Firebase but I've worked with multiple other clouds and never had this problem)

enter image description here

I changed to Firebase cause Vercel doesn't provide h3 Quic connection.

On my NextJS Config I've the following rule:

{
    source: '/:all*(svg|jpg|png|gif|ico|webp|jpeg|js|css|woff|woff2|ttf|otf|eot|json)',
    locale: false,
    headers: [
        {
            key: 'Cache-Control',
            value: 'public, max-age=31600000',
        }
    ],
},

This works on Vercel and all my files are cached but it doesn't work for Firebase App Hosting, when the protocol is H3 the cache is set for one minute:

Cache-Control Headers

I've also checked the firebase.json but it doesn't work and makes sense cause we don't need to init the firebase. Seems like when is h3 he overwrites that header.

Another thing is it still using gzip should not be brotli?

Someone knows a way of fixing this or am I missing something? Also it's really hard to find an answer since the App Hosting was launched 4 months ago and all the searches lead to the Firebase Hosting not the Firebase App Hosting.

Solution

  • After more research and going through the Docs (Since I didn't had the need to read them) I found that Google added this in the limitations:

    Cache-Control headers are modified to limit CDN caches to 60s; in the future, when App Hosting has the ability to quickly purge the cache on deploy, this limit will be lifted.

    So if anyone encounters the same problem, we need to wait or move to the Hosting feature of Firebase for now.