Implement way to alter which headers should be cached (#30)

docs/features/route-cache.md

@@ -88,6 +88,41 @@ served from cache by the cached item `api_query_products_1`:
 - /api/query/products?foobar=456&id=123
 - /api/query/products?foobar=456&id=123&whatever=string&does=not&matter=at-all
 
+### Alter which headers that are cached
+
+You can define a method that receives the headers of the response and returns
+the altered headers. The method is called right before the response is written
+to cache.
+
+::: warning
+
+By default all headers are stored in the cache, because it is assumed that your
+app already makes sure to not mark a response as cacheable during rendering. You
+can however alter the headers that are stored in the cache. Keep in mind that
+this might introduce side effects: If you use `useCookie()` to set a cookie and
+then remove the `Set-Cookie` header using this approach, only the first request
+will actually receive the `Set-Cookie` header. All subsequent requests that are
+served from cache won't have this header.
+
+:::
+
+::: code-group
+
+```typescript [multiCache.serverOptions.ts]
+import { defineMultiCacheOptions } from 'nuxt-multi-cache/dist/runtime/serverOptions'
+
+export default defineMultiCacheOptions({
+  route: {
+    alterCachedHeaders(headers) {
+      headers['set-cookie'] = undefined
+      return headers
+    },
+  },
+})
+```
+
+:::
+
 ## Usage in Components
 
 Use the `useRouteCache` composable in a page, layout or any component:

playground/app/multiCache.serverOptions.ts

@@ -54,6 +54,27 @@ export default defineMultiCacheOptions({
       driver: customDriver(),
     },
   },
+  route: {
+    alterCachedHeaders(headers) {
+      const cookie = headers['set-cookie']
+      // Remove the SESSION cookie.
+      if (cookie) {
+        if (typeof cookie === 'string') {
+          if (cookie.includes('SESSION')) {
+            headers['set-cookie'] = undefined
+          }
+        } else if (Array.isArray(cookie)) {
+          const remaining = cookie.filter((v) => !v.includes('SESSION'))
+          if (!remaining.length) {
+            headers['set-cookie'] = undefined
+          } else {
+            headers['set-cookie'] = remaining
+          }
+        }
+      }
+      return headers
+    },
+  },
   component: {},
   cacheKeyPrefix: (event: H3Event): Promise<string> => {
     return Promise.resolve(getCacheKeyPrefix(event))

playground/pages/cachedPageWithCountryCookie.vue

@@ -0,0 +1,17 @@
+<template>
+  <div id="data-cache-value">COUNTRY COOKIE: {{ country }}</div>
+</template>
+
+<script lang="ts" setup>
+import { useRouteCache, useCookie } from '#imports'
+
+const country = useCookie('country', {
+  default() {
+    return 'us'
+  },
+})
+
+useRouteCache((helper) => {
+  helper.setCacheable().setMaxAge(9000)
+})
+</script>

playground/pages/cachedPageWithRandomNumber.vue

@@ -1,16 +1,11 @@
 <template>
   <div id="data-cache-value">RANDOM[{{ random }}]</div>
-  <div id="data-cache-value">COOKIE COUNTER[{{ counter }}]</div>
 </template>
 
 <script lang="ts" setup>
-import { computed } from 'vue'
-import { useAsyncData, useCookie } from 'nuxt/app'
+import { useAsyncData } from 'nuxt/app'
 import { useRouteCache } from '#imports'
 
-const counter = useCookie('counter')
-counter.value = counter.value || Math.round(Math.random() * 1000)
-
 const { data: random } = await useAsyncData(() => {
   return Promise.resolve(Math.round(Math.random() * 1000000000).toString())
 })

playground/pages/cachedPageWithSessionCookie.vue

@@ -0,0 +1,17 @@
+<template>
+  <div id="data-cache-value">SESSION COOKIE: {{ session }}</div>
+</template>
+
+<script lang="ts" setup>
+import { useRouteCache, useCookie } from '#imports'
+
+const session = useCookie('SESSION', {
+  default() {
+    return Math.round(Math.random() * 1000).toString()
+  },
+})
+
+useRouteCache((helper) => {
+  helper.setCacheable().setMaxAge(9000)
+})
+</script>

src/runtime/serverHandler/responseSend.ts

@@ -91,8 +91,11 @@ export default defineEventHandler((event) => {
             return _end.call(event.node.res, arg1, arg2, arg3)
           }
 
-          const headers = response.getHeaders()
-          headers['set-cookie'] = undefined
+          let headers = { ...response.getHeaders() }
+
+          if (serverOptions.route?.alterCachedHeaders) {
+            headers = serverOptions.route.alterCachedHeaders(headers)
+          }
 
           const cacheItem = encodeRouteCacheItem(
             chunk,

src/runtime/types.ts

@@ -1,5 +1,6 @@
 import type { CreateStorageOptions, Storage } from 'unstorage'
 import type { H3Event } from 'h3'
+import { OutgoingHttpHeaders } from 'node:http'
 
 interface CacheConfigOptions {
   /**
@@ -187,6 +188,16 @@ export type MultiCacheServerOptions = {
      * Provide a custom function that builds the cache key for a route.
      */
     buildCacheKey?: (event: H3Event) => string
+
+    /**
+     * Alter the headers that are stored in the cache.
+     *
+     * You can use this to prevent certain headers from ever being cached,
+     * such as Set-Cookie.
+     */
+    alterCachedHeaders?: (
+      headers: OutgoingHttpHeaders,
+    ) => OutgoingHttpHeaders | Record<string, any>
   }
 
   /**

test/routeCache.test.ts

@@ -3,6 +3,7 @@ import { setup, $fetch } from '@nuxt/test-utils'
 import { describe, expect, test } from 'vitest'
 import { NuxtMultiCacheOptions } from '../src/runtime/types'
 import purgeAll from './__helpers__/purgeAll'
+import { decodeRouteCacheItem } from '../src/runtime/helpers/cacheItem'
 
 describe('The route cache feature', async () => {
   const multiCache: NuxtMultiCacheOptions = {
@@ -69,11 +70,30 @@ describe('The route cache feature', async () => {
     expect(first).not.toEqual(second)
   })
 
-  test('does not cache a pages cookie header', async () => {
+  test('does not cache the set-cookie header if it is a session cookie.', async () => {
     await purgeAll()
 
     // First call puts it into cache.
-    const first = await $fetch('/cachedPageWithRandomNumber', {
+    await $fetch('/cachedPageWithSessionCookie', {
+      method: 'get',
+    })
+
+    const cache = await $fetch(`/__nuxt_multi_cache/stats/route`, {
+      headers: {
+        'x-nuxt-multi-cache-token': 'hunter2',
+      },
+    })
+
+    const cacheItem = decodeRouteCacheItem(cache.rows[0].data)
+
+    expect(cacheItem?.headers['set-cookie']).toEqual(undefined)
+  })
+
+  test('does cache the set-cookie header if it is not a session cookie.', async () => {
+    await purgeAll()
+
+    // First call puts it into cache.
+    await $fetch('/cachedPageWithCountryCookie', {
       method: 'get',
     })
 
@@ -83,14 +103,12 @@ describe('The route cache feature', async () => {
       },
     })
 
-    const cacheItem = cache.rows[0].data.split('<CACHE_ITEM>')
-    let response = cacheItem[0]
-    try {
-      response = JSON.parse(cacheItem[0])
-    } catch (e) {
-      // ignore
-    }
+    const cacheItem = decodeRouteCacheItem(cache.rows[0].data)
 
-    expect(response.headers['set-cookie']).toEqual(undefined)
+    expect(cacheItem?.headers['set-cookie']).toMatchInlineSnapshot(`
+      [
+        "country=us; Path=/",
+      ]
+    `)
   })
 })

test/serverHandler/responseSend.test.ts

@@ -1,4 +1,4 @@
-import { describe, expect, test, vi, afterEach, beforeEach } from 'vitest'
+import { describe, expect, test, vi } from 'vitest'
 import { createStorage } from 'unstorage'
 import { sleep } from '../__helpers__'
 import responseSend from '../../src/runtime/serverHandler/responseSend'
@@ -124,6 +124,7 @@ describe('responseSend server handler', () => {
       path: '/test/route/nested',
       node: {
         res: {
+          statusCode: 200,
           end: () => {},
           getHeaders() {
             return {
@@ -149,7 +150,7 @@ describe('responseSend server handler', () => {
     await sleep(100)
 
     expect(await storage.getItemRaw('test:route:nested')).toMatchInlineSnapshot(
-      '"{\\"headers\\":{\\"x-test\\":\\"Foobar\\"},\\"cacheTags\\":[]}<CACHE_ITEM><html></html>"',
+      '"{\\"headers\\":{\\"x-test\\":\\"Foobar\\"},\\"statusCode\\":200,\\"cacheTags\\":[]}<CACHE_ITEM><html></html>"',
     )
   })
 
@@ -159,6 +160,7 @@ describe('responseSend server handler', () => {
       path: '/test/route/nested',
       node: {
         res: {
+          statusCode: 200,
           end: () => {},
           getHeaders() {
             return {
@@ -192,6 +194,7 @@ describe('responseSend server handler', () => {
       path: '/test/route/nested',
       node: {
         res: {
+          statusCode: 200,
           end: () => {},
           getHeaders() {
             return {
@@ -225,6 +228,7 @@ describe('responseSend server handler', () => {
       path: '/test/route/nested',
       node: {
         res: {
+          statusCode: 200,
           end: () => {},
           getHeaders() {
             return {