Route Caching: ERR_CONTENT_DECODING_FAILED 200 (OK)

[lukas-kreuzer]

I am currently running nuxt v.3.10.3 and nuxt-multi-cache v3.1.1 and am having problems with the route cache.
I get the following error in the browser console when I try to access a simple cached page (index.vue) with only text on it:

GET http://localhost:3000/de net::ERR_CONTENT_DECODING_FAILED 200 (OK)

index.vue

<script setup lang="ts">
// page caching
useRouteCache((helper) => {
  helper.setMaxAge(10).setCacheable().addTags(['page:1'])
})
</script>

<template>
  Test
</template>

The route is successfully cached and I can view the data in my redis database, but when I try to access the cached page in the browser, I get this error and no content is displayed.

[lukas-kreuzer]

Ok it seems that the useGZipCompression composable from the h3-compression module does not work well with the route cache. This composable sets the "content-encoding": "gzip" header and this is breaking the route cache. After disabling the gzip compression, the route cache works as intended

[dulnan]

I think I know why this doesn't work and unfortunately there is no easy fix. Nuxt/Nitro does not offer an easy way to implement something like nuxt-multi-cache does for route caching, which is why this module has to do quite a workaround to make it work. And this workaround does not seem to be compatible with something like gzip compression. I will look into it though, maybe things have changed since first implementing this feature.

[majtanmarek]

Any progress here?

[dulnan]

After some digging, I found a way to make this (hopefully) work. I have added some tests specifically with the h3-compression library to make sure it works as expected. So both the initial uncached response and subsequent cached responses will all be compressed, however it requires the use of the beforeResponse Nitro hook in your projects, since this is the only hook that is guaranteed to be called in both cases (uncached and cached response).

I also added a page in the docs about using compression together with the route cache and an example hook: https://nuxt-multi-cache.dulnan.net/advanced/route-cache-with-compression