Adding cache control headers for static assets with Now 2.0

Update 5/2/2019: The Now team added some better documentation around caching static assets.

As of early January 2019, Now 2.0 is still young, and so is the documentation. It’s moving quickly and improving every day but one fairly common use case that I wasn’t able to find documented anywhere was how to set caching headers for static assets.

You could kind of figure it out via some trial and error, but I think it’s important enough for them to put in their docs. Previously for v1, it was pointed out very clearly with examples.

I reached out to them in a thread in Now’s community on Spectrum.chat and a dev from their team was very prompt & helpful. Also sounds like they may add something to the docs hopefully to help others having the same questions as I did.

Here’s the solution I used for my personal site.

The key is to use the routes prop in your now config, targeting static assets with a regex pattern, setting the headers you want, and leaving dest empty.

I personally chose a max age of 5 years cause I’m using Parcel which dynamically adds cache-busting hashes to filenames at build time. This allows me to just add a massive cache time here because I don’t ever really need to invalidate. Any changes to files will generate new filenames so I don’t need to worry about cache.

Hopefully they can add some different examples here in the routes config docs. I’m working on contributing myself, hopefully updates to come!