Page caching with Nuxt and Nitro hooks

Since version 3.11.3, Pruvious comes with a built-in page caching feature to improve the time to first byte (TTFB). By default, it is activated in production environments and can be disabled by setting the pruvious.pageCache option to false in your project's nuxt.config.ts file.

How does it work

The HTML of every public page gets cached in the local .cache directory after the initial visit. Subsequent visits will attempt to retrieve the cached version before initiating the Nuxt server-side rendering (SSR) process.

If you are using a distributed production environment, you can store the cache in Redis by configuring your nuxt.config.ts like this:

# nuxt.config.ts

export default defineNuxtConfig({
  modules: ['pruvious'],
  pruvious: {
    pageCache: { type: 'redis' },
    redis: 'redis://username:password@127.0.0.1:6379/0',
  },
})

The cache is automatically cleared on every change within the CMS, including publishing scheduled pages or any updates to the database. You can also manually clear the cache from the dashboard by clicking the Clear cache button in the top right corner of the UI, or programmatically by calling the clearPageCache utility, which can be imported from the #pruvious/server handle. Additionally, you can fine-tune the clearing actions (create, update, and delete) for each collection individually by setting the clearCacheRules option when defining the collection.

Page caching is achieved through the Nitro hooks request, render:html, and render:response. Check out the code on GitHub for more details on the implementation.