CODEWITHSUNDEEP
google-app-enginecachingnuxt.jscache-controllighthouse
lmfresneda
lmfresneda

Reputation: 467

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

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

Upvotes: 6

Views: 10308

Answers (3)

Guillaume Prévost
Guillaume Prévost

Reputation: 413

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".

Upvotes: 2

lmfresneda
lmfresneda

Reputation: 467

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

Upvotes: 3

Jesús Fuentes
Jesús Fuentes

Reputation: 919

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,
  },
},

Upvotes: 3

Related Questions