fix: honor user defined netlify-vary (#410)

Author: pieh

src/run/headers.test.ts

@@ -140,6 +140,53 @@ describe('headers', () => {
           'header=x-nextjs-data,language=en|de|fr,cookie=__prerender_bypass|__next_preview_data|NEXT_LOCALE',
         )
       })
+
+      test('with user defined Netlify-Vary (catch-all query) being included', () => {
+        const headers = new Headers({
+          'Netlify-Vary': 'query,header=x-custom-header,language=es,country=es,cookie=ab_test',
+        })
+        const request = new Request(`${defaultUrl}/base/path`)
+        const config = {
+          ...defaultConfig,
+          basePath: '/base/path',
+          i18n: {
+            locales: ['en', 'de', 'fr'],
+            defaultLocale: 'default',
+          },
+        }
+        vi.spyOn(headers, 'set')
+
+        setVaryHeaders(headers, request, config)
+
+        expect(headers.set).toBeCalledWith(
+          'netlify-vary',
+          'query,header=x-nextjs-data|x-custom-header,language=en|de|fr|es,cookie=__prerender_bypass|__next_preview_data|NEXT_LOCALE|ab_test,country=es',
+        )
+      })
+
+      test('with user defined Netlify-Vary (manual query variation) being included', () => {
+        const headers = new Headers({
+          'Netlify-Vary':
+            'query=item_id|page|per_page,header=x-custom-header,language=es,country=es,cookie=ab_test',
+        })
+        const request = new Request(`${defaultUrl}/base/path`)
+        const config = {
+          ...defaultConfig,
+          basePath: '/base/path',
+          i18n: {
+            locales: ['en', 'de', 'fr'],
+            defaultLocale: 'default',
+          },
+        }
+        vi.spyOn(headers, 'set')
+
+        setVaryHeaders(headers, request, config)
+
+        expect(headers.set).toBeCalledWith(
+          'netlify-vary',
+          'query=item_id|page|per_page,header=x-nextjs-data|x-custom-header,language=en|de|fr|es,cookie=__prerender_bypass|__next_preview_data|NEXT_LOCALE|ab_test,country=es',
+        )
+      })
     })
   })
 

src/run/headers.ts

@@ -8,22 +8,48 @@ import type { TagsManifest } from './config.js'
 import type { RequestContext } from './handlers/request-context.cjs'
 import type { RuntimeTracer } from './handlers/tracer.cjs'
 
+const ALL_VARIATIONS = Symbol.for('ALL_VARIATIONS')
 interface NetlifyVaryValues {
-  headers: string[]
-  languages: string[]
-  cookies: string[]
+  header: string[]
+  language: string[]
+  cookie: string[]
+  /**
+   * Query variation can be without argument in which case all query combinations would create a new cache key
+   * This is represented by a ALL_VARIATIONS in the array.
+   */
+  query: (string | typeof ALL_VARIATIONS)[]
+  country: string[]
 }
 
-const generateNetlifyVaryValues = ({ headers, languages, cookies }: NetlifyVaryValues): string => {
+const NetlifyVaryKeys = new Set(['header', 'language', 'cookie', 'query', 'country'])
+const isNetlifyVaryKey = (key: string): key is keyof NetlifyVaryValues => NetlifyVaryKeys.has(key)
+
+const generateNetlifyVaryValues = ({
+  header,
+  language,
+  cookie,
+  query,
+  country,
+}: NetlifyVaryValues): string => {
   const values: string[] = []
-  if (headers.length !== 0) {
-    values.push(`header=${headers.join(`|`)}`)
+  if (query.length !== 0) {
+    if (query.includes(ALL_VARIATIONS)) {
+      values.push(`query`)
+    } else {
+      values.push(`query=${query.join(`|`)}`)
+    }
+  }
+  if (header.length !== 0) {
+    values.push(`header=${header.join(`|`)}`)
+  }
+  if (language.length !== 0) {
+    values.push(`language=${language.join(`|`)}`)
   }
-  if (languages.length !== 0) {
-    values.push(`language=${languages.join(`|`)}`)
+  if (cookie.length !== 0) {
+    values.push(`cookie=${cookie.join(`|`)}`)
   }
-  if (cookies.length !== 0) {
-    values.push(`cookie=${cookies.join(`|`)}`)
+  if (country.length !== 0) {
+    values.push(`country=${country.join(`|`)}`)
   }
   return values.join(',')
 }
@@ -56,22 +82,40 @@ export const setVaryHeaders = (
   { basePath, i18n }: Pick<NextConfigComplete, 'basePath' | 'i18n'>,
 ) => {
   const netlifyVaryValues: NetlifyVaryValues = {
-    headers: ['x-nextjs-data'],
-    languages: [],
-    cookies: ['__prerender_bypass', '__next_preview_data'],
+    header: ['x-nextjs-data'],
+    language: [],
+    cookie: ['__prerender_bypass', '__next_preview_data'],
+    query: [],
+    country: [],
   }
 
   const vary = headers.get('vary')
   if (vary !== null) {
-    netlifyVaryValues.headers.push(...getHeaderValueArray(vary))
+    netlifyVaryValues.header.push(...getHeaderValueArray(vary))
   }
 
   const path = new URL(request.url).pathname
   const locales = i18n && i18n.localeDetection !== false ? i18n.locales : []
 
   if (locales.length > 1 && (path === '/' || path === basePath)) {
-    netlifyVaryValues.languages.push(...locales)
-    netlifyVaryValues.cookies.push(`NEXT_LOCALE`)
+    netlifyVaryValues.language.push(...locales)
+    netlifyVaryValues.cookie.push(`NEXT_LOCALE`)
+  }
+
+  const userNetlifyVary = headers.get('netlify-vary')
+  if (userNetlifyVary) {
+    // respect user's header and append them
+    const directives = getHeaderValueArray(userNetlifyVary)
+    for (const directive of directives) {
+      const [key, value] = directive.split('=')
+
+      if (key === 'query' && !value) {
+        // query can have no "assignment" and then it should vary on all possible query combinations
+        netlifyVaryValues.query.push(ALL_VARIATIONS)
+      } else if (value && isNetlifyVaryKey(key)) {
+        netlifyVaryValues[key].push(...value.split('|'))
+      }
+    }
   }
 
   headers.set(`netlify-vary`, generateNetlifyVaryValues(netlifyVaryValues))
@@ -182,6 +226,7 @@ export const setCacheControlHeaders = (
   if (
     typeof requestContext.routeHandlerRevalidate !== 'undefined' &&
     ['GET', 'HEAD'].includes(request.method) &&
+    !headers.has('cdn-cache-control') &&
     !headers.has('netlify-cdn-cache-control')
   ) {
     // handle CDN Cache Control on Route Handler responses