fix: standardize stale-while-revalidate header (#95)

* fix: next.js doesn't respect swr standard

* chore: add test for swr fix

* chore: update tests with new swr value

Author: orinokai

src/run/headers.ts

@@ -25,14 +25,20 @@ const getHeaderValueArray = (header: string): string[] => {
   return header.split(',').map((value) => value.trim())
 }
 
-const removeHeaderValues = (header: string, values: string[]): string => {
+const omitHeaderValues = (header: string, values: string[]): string => {
   const headerValues = getHeaderValueArray(header)
   const filteredValues = headerValues.filter(
     (value) => !values.some((val) => value.startsWith(val)),
   )
   return filteredValues.join(', ')
 }
 
+const mapHeaderValues = (header: string, callback: (value: string) => string): string => {
+  const headerValues = getHeaderValueArray(header)
+  const mappedValues = headerValues.map(callback)
+  return mappedValues.join(', ')
+}
+
 /**
  * Ensure the Netlify CDN varies on things that Next.js varies on,
  * e.g. i18n, preview mode, etc.
@@ -75,12 +81,16 @@ export const setCacheControlHeaders = (headers: Headers) => {
     !headers.has('cdn-cache-control') &&
     !headers.has('netlify-cdn-cache-control')
   ) {
-    const clientCacheControl = removeHeaderValues(cacheControl, [
+    const privateCacheControl = omitHeaderValues(cacheControl, [
       's-maxage',
       'stale-while-revalidate',
     ])
-    headers.set('cache-control', clientCacheControl || 'public, max-age=0, must-revalidate')
-    headers.set('netlify-cdn-cache-control', cacheControl)
+    const sharedCacheControl = mapHeaderValues(cacheControl, (value) =>
+      value === 'stale-while-revalidate' ? 'stale-while-revalidate=31536000' : value,
+    )
+
+    headers.set('cache-control', privateCacheControl || 'public, max-age=0, must-revalidate')
+    headers.set('netlify-cdn-cache-control', sharedCacheControl)
   }
 }
 

tests/integration/cache-handler.test.ts

@@ -49,7 +49,7 @@ describe('page router', () => {
     expect(call1.headers, 'a cache hit on the first invocation of a prerendered page').toEqual(
       expect.objectContaining({
         'x-nextjs-cache': 'HIT',
-        'netlify-cdn-cache-control': 's-maxage=5, stale-while-revalidate',
+        'netlify-cdn-cache-control': 's-maxage=5, stale-while-revalidate=31536000',
       }),
     )
 
@@ -110,7 +110,7 @@ describe('app router', () => {
     expect(post1.headers, 'a cache hit on the first invocation of a prerendered page').toEqual(
       expect.objectContaining({
         'x-nextjs-cache': 'HIT',
-        'netlify-cdn-cache-control': 's-maxage=5, stale-while-revalidate',
+        'netlify-cdn-cache-control': 's-maxage=5, stale-while-revalidate=31536000',
       }),
     )
 

tests/integration/revalidate-path.test.ts

@@ -45,13 +45,13 @@ test<FixtureTestContext>('should revalidate a route by path', async (ctx) => {
   expect(post1.headers, 'a cache hit on the first invocation of a prerendered page').toEqual(
     expect.objectContaining({
       'x-nextjs-cache': 'HIT',
-      'netlify-cdn-cache-control': 's-maxage=31536000, stale-while-revalidate',
+      'netlify-cdn-cache-control': 's-maxage=31536000, stale-while-revalidate=31536000',
     }),
   )
   expect(post1Route2.headers, 'a cache hit on the first invocation of a prerendered page').toEqual(
     expect.objectContaining({
       'x-nextjs-cache': 'HIT',
-      'netlify-cdn-cache-control': 's-maxage=31536000, stale-while-revalidate',
+      'netlify-cdn-cache-control': 's-maxage=31536000, stale-while-revalidate=31536000',
     }),
   )
 
@@ -76,13 +76,13 @@ test<FixtureTestContext>('should revalidate a route by path', async (ctx) => {
   expect(post2.headers, 'a cache miss on the on demand revalidated path /1').toEqual(
     expect.objectContaining({
       'x-nextjs-cache': 'MISS',
-      'netlify-cdn-cache-control': 's-maxage=31536000, stale-while-revalidate',
+      'netlify-cdn-cache-control': 's-maxage=31536000, stale-while-revalidate=31536000',
     }),
   )
   expect(post2Route2.headers, 'a cache miss on the on demand revalidated path /2').toEqual(
     expect.objectContaining({
       'x-nextjs-cache': 'MISS',
-      'netlify-cdn-cache-control': 's-maxage=31536000, stale-while-revalidate',
+      'netlify-cdn-cache-control': 's-maxage=31536000, stale-while-revalidate=31536000',
     }),
   )
   expect(post2Date).not.toBe(post1Date)

tests/integration/revalidate-tags.test.ts

@@ -40,7 +40,7 @@ test<FixtureTestContext>('should revalidate a route by tag', async (ctx) => {
   expect(post1.headers, 'a cache hit on the first invocation of a prerendered page').toEqual(
     expect.objectContaining({
       'x-nextjs-cache': 'HIT',
-      'netlify-cdn-cache-control': 's-maxage=31536000, stale-while-revalidate',
+      'netlify-cdn-cache-control': 's-maxage=31536000, stale-while-revalidate=31536000',
     }),
   )
 
@@ -58,7 +58,7 @@ test<FixtureTestContext>('should revalidate a route by tag', async (ctx) => {
   expect(post2.headers, 'a cache miss on the on demand revalidated page').toEqual(
     expect.objectContaining({
       'x-nextjs-cache': 'MISS',
-      'netlify-cdn-cache-control': 's-maxage=31536000, stale-while-revalidate',
+      'netlify-cdn-cache-control': 's-maxage=31536000, stale-while-revalidate=31536000',
     }),
   )
   expect(post2Date).not.toBe(post1Date)
@@ -73,7 +73,7 @@ test<FixtureTestContext>('should revalidate a route by tag', async (ctx) => {
   expect(post3.headers, 'a cache hit on the revalidated and regenerated page').toEqual(
     expect.objectContaining({
       'x-nextjs-cache': 'HIT',
-      'netlify-cdn-cache-control': 's-maxage=31536000, stale-while-revalidate',
+      'netlify-cdn-cache-control': 's-maxage=31536000, stale-while-revalidate=31536000',
     }),
   )
   expect(post3Date).toBe(post2Date)

tests/integration/simple-app.test.ts

@@ -70,3 +70,10 @@ test<FixtureTestContext>('index should be normalized within the cacheHandler and
   expect(index.statusCode).toBe(200)
   expect(index.headers?.['cache-tag']).toBe('_N_T_/layout,_N_T_/page,_N_T_/')
 })
+
+test<FixtureTestContext>('stale-while-revalidate headers should be normalized to include delta-seconds', async (ctx) => {
+  await createFixture('simple-next-app', ctx)
+  await runPlugin(ctx)
+  const index = await invokeFunction(ctx, { url: '/' })
+  expect(index.headers?.['netlify-cdn-cache-control']).toContain('stale-while-revalidate=31536000')
+})