Serve static assets with an efficient cache policy - Nuxt.js + GAE

Viewed 6356

I get the following from Lighthouse:

enter image description here

How do I change the Cache TTL on a Nuxt.js SSR website? I found some answers but nothing about Nuxt.js...

IMPORTANT: Deployed in Google App Engine

3 Answers

You can serve your static folder with custom cache policy following the render configuration.

As an example:

render: {
  // Setting up cache for 'static' directory - a year in milliseconds
  // https://web.dev/uses-long-cache-ttl
  static: {
    maxAge: 60 * 60 * 24 * 365 * 1000,
  },
},

The specific answer for GAE Apps, is the parameter handlers.expiration in app.yaml file:

handlers:
  - url: /_nuxt
    static_dir: .nuxt/dist/client
    expiration: 4d 5h
    secure: always

Or if you want to configure it globally, set the default_expiration parameter at the root level:

default_expiration: 4d 5h

Allows d (days), h (hours), m (minutes) and s (seconds). Here's the docs

In addition to the answer, please note that - at the time of writing - the minimum time required by Lighthouse to pass is > 96.5d (Source : https://github.com/GoogleChrome/lighthouse/issues/11380)

I've followed the answer by @lmfresneda and managed to get the solution to work, making the cache time 30d : I still had the Lighthouse test fail until I changed it to "97d".

Related