Invalidate Firebase cache for Google Cloud Function on deploy

Question

I have recently implemented SSR with Cloud Functions and Firebase Hosting.

When the JS bundle is built it receives a cache bursting suffix (main.1.js).

Inside my function I have the following piece of code for caching the results of the Cloud Function

res.set('Cache-Control', 'public, max-age=300, s-maxage=300');

During deploy, I deploy hosting first and then cloud function

firebase deploy --only hosting:production && gcloud functions deploy ssr --runtime nodejs8 --trigger-http --source dist/server

The firebase hosting deployment replaces main.1.js with main.2.js.

Due to the cache bursting the file is now different (main.2.js) but because the cloud function is cached for another 5 minutes - I get errors when I visit the website (because main.1.js which is referenced in the cached version of the function, is no longer available).

How would you fix such an issue? Can I have two active deployments and activate one after another?

Answer 1

The cache control header public, max-age=300, s-maxage=300 tells any party handling a request (mainly the users's browser and Google's CDN server but can also be e.g. a proxy the user is using) how to cache the request. With your configuration both will cache the file for 5 minutes. You cannot change this behavior as there is no way to invalidate the CDN server's cache and the browser does not know about your deployment either and even if it would get a notification and reload it would get the same outdated file from the CDN.

I don't fully understand your use case but here are possible solutions:

• Make sure not to delete old files, so you need to keep any version of main.x.js for at least the cache duration. You can use Cloud Storage to upload the file on deployment.
• Add a fallback to the client. If main.1.js gives a 404, increment the number and try main.2.js
• Keep the name stable, e.g. main.js
• Add the contents of main.js to the cloud function's response body. By doing so, you ensure that the cloud functions response and the content of main.x.js get cached together and reloaded together
• Remove the cache control header. This will lead to higher traffic on your functions and thus to higher costs.
• Also change your function name or its rewrite on deployment to cause a cache miss