test: add e2e tests for next@16 updateTag and revalidateTag with expiration profiles

Author: pieh

tests/e2e/on-demand-app.test.ts

@@ -2,7 +2,7 @@ import { expect } from '@playwright/test'
 import { test } from '../utils/playwright-helpers.js'
 import { nextVersionSatisfies } from '../utils/next-version-helpers.mjs'
 
-test.describe('app router on-demand revalidation', () => {
+test.describe('app router on-demand revalidation (pre Next 16 APIs)', () => {
   for (const { label, prerendered, pagePath, revalidateApiPath, expectedH1Content } of [
     {
       label: 'revalidatePath (prerendered page with static path)',
@@ -193,3 +193,297 @@ test.describe('app router on-demand revalidation', () => {
     })
   }
 })
+
+if (nextVersionSatisfies('>=16.0.0-alpha.0')) {
+  test.describe('app router on-demand revalidation (Next 16 APIs)', () => {
+    for (const { label, prerendered, pagePathSuffix, tagSuffix, expectedH1Content } of [
+      {
+        label: 'prerendered page with static path',
+        prerendered: true,
+        pagePathSuffix: '/product-static',
+        tagSuffix: 'product-static',
+        expectedH1Content: 'Product product-static',
+      },
+      {
+        label: 'prerendered page with dynamic path',
+        prerendered: true,
+        pagePathSuffix: '/product/prerendered',
+        tagSuffix: 'prerendered',
+        expectedH1Content: 'Product prerendered',
+      },
+      {
+        label: 'not prerendered page with dynamic path',
+        prerendered: false,
+        pagePathSuffix: '/product/not-prerendered',
+        tagSuffix: 'not-prerendered',
+        expectedH1Content: 'Product not-prerendered',
+      },
+    ]) {
+      test.describe(label, () => {
+        for (const { label, revalidateApiProfileSuffix, tagPrefix } of [
+          {
+            label: 'revalidateTag with string profile',
+            revalidateApiProfileSuffix: `profile=testCacheLife`,
+            tagPrefix: `revalidate-tag-string-profile`,
+          },
+          {
+            label: 'revalidateTag with explicit inline expire',
+            revalidateApiProfileSuffix: `expire=5`,
+            tagPrefix: `revalidate-tag-explicit-inline-expire`,
+          },
+        ]) {
+          test(label, async ({ page, pollUntilHeadersMatch, next16TagRevalidation }) => {
+            const pagePath = `/${tagPrefix}${pagePathSuffix}`
+            const revalidateApiPath = `/api/revalidate-tag?tag=${tagPrefix}-${tagSuffix}&${revalidateApiProfileSuffix}`
+
+            // in case there is retry or some other test did hit that path before
+            // we want to make sure that cdn cache is not warmed up
+            const purgeCdnCache = await page.goto(
+              new URL(`/api/purge-cdn?path=${pagePath}`, next16TagRevalidation.url).href,
+            )
+            expect(purgeCdnCache?.status()).toBe(200)
+
+            // wait a bit until cdn cache purge propagates
+            await page.waitForTimeout(500)
+
+            const response1 = await pollUntilHeadersMatch(
+              new URL(pagePath, next16TagRevalidation.url).href,
+              {
+                headersToMatch: {
+                  // either first time hitting this route or we invalidated
+                  // just CDN node in earlier step
+                  // we will invoke function and see Next cache hit status
+                  // in the response if it was prerendered at build time
+                  // or regenerated in previous attempt to run this test
+                  'cache-status': [
+                    /"Netlify Edge"; fwd=(miss|stale)/m,
+                    prerendered ? /"Next.js"; hit/m : /"Next.js"; (hit|fwd=miss)/m,
+                  ],
+                },
+                headersNotMatchedMessage:
+                  'First request to tested page should be a miss or stale on the Edge and hit in Next.js',
+              },
+            )
+            const headers1 = response1?.headers() || {}
+            expect(response1?.status()).toBe(200)
+            expect(headers1['x-nextjs-cache']).toBeUndefined()
+            expect(headers1['debug-netlify-cdn-cache-control']).toBe('s-maxage=31536000, durable')
+
+            const date1 = await page.getByTestId('date-now').textContent()
+
+            const h1 = await page.locator('h1').textContent()
+            expect(h1).toBe(expectedH1Content)
+
+            const response2 = await pollUntilHeadersMatch(
+              new URL(pagePath, next16TagRevalidation.url).href,
+              {
+                headersToMatch: {
+                  // we are hitting the same page again and we most likely will see
+                  // CDN hit (in this case Next reported cache status is omitted
+                  // as it didn't actually take place in handling this request)
+                  // or we will see CDN miss because different CDN node handled request
+                  'cache-status': /"Netlify Edge"; (hit|fwd=miss|fwd=stale)/m,
+                },
+                headersNotMatchedMessage:
+                  'Second request to tested page should most likely be a hit on the Edge (optionally miss or stale if different CDN node)',
+              },
+            )
+            const headers2 = response2?.headers() || {}
+            expect(response2?.status()).toBe(200)
+            expect(headers2['x-nextjs-cache']).toBeUndefined()
+            if (!headers2['cache-status'].includes('"Netlify Edge"; hit')) {
+              // if we missed CDN cache, we will see Next cache hit status
+              // as we reuse cached response
+              expect(headers2['cache-status']).toMatch(/"Next.js"; hit/m)
+            }
+            expect(headers2['debug-netlify-cdn-cache-control']).toBe('s-maxage=31536000, durable')
+
+            // the page is cached
+            const date2 = await page.getByTestId('date-now').textContent()
+            expect(date2).toBe(date1)
+
+            const revalidate = await page.goto(
+              new URL(revalidateApiPath, next16TagRevalidation.url).href,
+            )
+            expect(revalidate?.status()).toBe(200)
+
+            // wait a bit until cdn tags and invalidated and cdn is purged
+            await page.waitForTimeout(500)
+
+            // now after the revalidation with delayed expiration, it should serve stale if we are still before expiration time was not reached
+            const response3 = await pollUntilHeadersMatch(
+              new URL(pagePath, next16TagRevalidation.url).href,
+              {
+                headersToMatch: {
+                  // revalidatePath just marks the page(s) as stale and does NOT
+                  // automatically refreshes the cache. This request should result
+                  // in serving stale content and trigger background revalidation.
+                  'cache-status': [
+                    /"Next.js"; hit; fwd=stale/m,
+                    /"Netlify Edge"; fwd=(miss|stale)/m,
+                  ],
+                },
+                headersNotMatchedMessage:
+                  'Third request to tested page should be a miss or stale on the Edge and stale in Next.js after on-demand revalidation with delayed expiration',
+              },
+            )
+            const headers3 = response3?.headers() || {}
+            expect(response3?.status()).toBe(200)
+            expect(headers3?.['x-nextjs-cache']).toBeUndefined()
+            expect(headers3['debug-netlify-cdn-cache-control'], 'Stale is not cacheable').toBe(
+              'public, max-age=0, must-revalidate, durable',
+            )
+
+            // the page is stale but still served, because we hit it before expiration
+            const date3 = await page.getByTestId('date-now').textContent()
+            expect(date3).toBe(date2)
+
+            // previous request should trigger background revalidation. There is 5s sleep in data fetching in tested page
+            // so let's wait for that
+
+            await page.waitForTimeout(6000)
+
+            const response4 = await pollUntilHeadersMatch(
+              new URL(pagePath, next16TagRevalidation.url).href,
+              {
+                headersToMatch: {
+                  // we are hitting the same page again and we most likely will see
+                  // CDN hit (in this case Next reported cache status is omitted
+                  // as it didn't actually take place in handling this request)
+                  // or we will see CDN miss because different CDN node handled request
+                  'cache-status': /"Netlify Edge"; (hit|fwd=miss|fwd=stale)/m,
+                },
+                headersNotMatchedMessage:
+                  'Fourth request  to tested page should most likely be a hit on the Edge (optionally miss or stale if different CDN node)',
+              },
+            )
+            const headers4 = response4?.headers() || {}
+            expect(response4?.status()).toBe(200)
+            expect(headers4?.['x-nextjs-cache']).toBeUndefined()
+            if (!headers4['cache-status'].includes('"Netlify Edge"; hit')) {
+              // if we missed CDN cache, we will see Next cache hit status
+              // as we reuse cached response
+              expect(headers4['cache-status']).toMatch(/"Next.js"; hit/m)
+            }
+            expect(headers4['debug-netlify-cdn-cache-control']).toBe('s-maxage=31536000, durable')
+
+            // the page is cached
+            const date4 = await page.getByTestId('date-now').textContent()
+            expect(date4).not.toBe(date3)
+
+            // lets revalidate again, but now we will wait for expiration time to pass to test that we are not serving stale anymore
+            const revalidate2 = await page.goto(
+              new URL(revalidateApiPath, next16TagRevalidation.url).href,
+            )
+            expect(revalidate2?.status()).toBe(200)
+
+            // revalidation should allow stale to be served for 5 seconds, let's wait to test case after expiration
+            await page.waitForTimeout(6000)
+
+            // now after the revalidation it should have a different date
+            const response5 = await pollUntilHeadersMatch(
+              new URL(pagePath, next16TagRevalidation.url).href,
+              {
+                headersToMatch: {
+                  // revalidatePath just marks the page(s) as invalid and does NOT
+                  // automatically refreshes the cache. This request will cause
+                  // Next.js cache miss and new response will be generated and cached
+                  // Depending if we hit same CDN node as previous request, we might
+                  // get either fwd=miss or fwd=stale
+                  'cache-status': [/"Next.js"; fwd=miss/m, /"Netlify Edge"; fwd=(miss|stale)/m],
+                },
+                headersNotMatchedMessage:
+                  'Third request to tested page should be a miss or stale on the Edge and miss in Next.js after on-demand revalidation',
+              },
+            )
+            const headers5 = response5?.headers() || {}
+            expect(response5?.status()).toBe(200)
+            expect(headers5?.['x-nextjs-cache']).toBeUndefined()
+            expect(headers5['debug-netlify-cdn-cache-control']).toBe('s-maxage=31536000, durable')
+
+            // the page has now an updated date
+            const date5 = await page.getByTestId('date-now').textContent()
+            expect(date5).not.toBe(date4)
+          })
+        }
+
+        test('updateTag in server action', async ({
+          page,
+          pollUntilHeadersMatch,
+          next16TagRevalidation,
+        }) => {
+          const pagePath = `/update-tag/${pagePathSuffix}`
+          // in case there is retry or some other test did hit that path before
+          // we want to make sure that cdn cache is not warmed up
+          const purgeCdnCache = await page.goto(
+            new URL(`/api/purge-cdn?path=${pagePath}`, next16TagRevalidation.url).href,
+          )
+          expect(purgeCdnCache?.status()).toBe(200)
+
+          // wait a bit until cdn cache purge propagates
+          await page.waitForTimeout(500)
+
+          const response1 = await pollUntilHeadersMatch(
+            new URL(pagePath, next16TagRevalidation.url).href,
+            {
+              headersToMatch: {
+                // either first time hitting this route or we invalidated
+                // just CDN node in earlier step
+                // we will invoke function and see Next cache hit status
+                // in the response if it was prerendered at build time
+                // or regenerated in previous attempt to run this test
+                'cache-status': [
+                  /"Netlify Edge"; fwd=(miss|stale)/m,
+                  prerendered ? /"Next.js"; hit/m : /"Next.js"; (hit|fwd=miss)/m,
+                ],
+              },
+              headersNotMatchedMessage:
+                'First request to tested page should be a miss or stale on the Edge and hit in Next.js',
+            },
+          )
+          const headers1 = response1?.headers() || {}
+          expect(response1?.status()).toBe(200)
+          expect(headers1['x-nextjs-cache']).toBeUndefined()
+          expect(headers1['debug-netlify-cdn-cache-control']).toBe('s-maxage=31536000, durable')
+
+          const date1 = await page.getByTestId('date-now').textContent()
+
+          const h1 = await page.locator('h1').textContent()
+          expect(h1).toBe(expectedH1Content)
+
+          const response2 = await pollUntilHeadersMatch(
+            new URL(pagePath, next16TagRevalidation.url).href,
+            {
+              headersToMatch: {
+                // we are hitting the same page again and we most likely will see
+                // CDN hit (in this case Next reported cache status is omitted
+                // as it didn't actually take place in handling this request)
+                // or we will see CDN miss because different CDN node handled request
+                'cache-status': /"Netlify Edge"; (hit|fwd=miss|fwd=stale)/m,
+              },
+              headersNotMatchedMessage:
+                'Second request to tested page should most likely be a hit on the Edge (optionally miss or stale if different CDN node)',
+            },
+          )
+          const headers2 = response2?.headers() || {}
+          expect(response2?.status()).toBe(200)
+          expect(headers2['x-nextjs-cache']).toBeUndefined()
+          if (!headers2['cache-status'].includes('"Netlify Edge"; hit')) {
+            // if we missed CDN cache, we will see Next cache hit status
+            // as we reuse cached response
+            expect(headers2['cache-status']).toMatch(/"Next.js"; hit/m)
+          }
+          expect(headers2['debug-netlify-cdn-cache-control']).toBe('s-maxage=31536000, durable')
+
+          // the page is cached
+          const date2 = await page.getByTestId('date-now').textContent()
+          expect(date2).toBe(date1)
+
+          await page.getByTestId('update-tag-button').click()
+
+          await expect(page.getByTestId('date-now')).not.toHaveText(date2!, { timeout: 15_000 })
+        })
+      })
+    }
+  })
+}

tests/fixtures/next-16-tag-revalidation/app/api/purge-cdn/route.ts

@@ -0,0 +1,40 @@
+import { purgeCache } from '@netlify/functions'
+import { NextRequest, NextResponse } from 'next/server'
+
+export async function GET(request: NextRequest) {
+  const url = new URL(request.url)
+  const pathToPurge = url.searchParams.get('path')
+
+  if (!pathToPurge) {
+    return NextResponse.json(
+      {
+        status: 'error',
+        error: 'missing "path" query parameter',
+      },
+      { status: 400 },
+    )
+  }
+  try {
+    await purgeCache({ tags: [`_N_T_${encodeURI(pathToPurge)}`] })
+    return NextResponse.json(
+      {
+        status: 'ok',
+      },
+      {
+        status: 200,
+      },
+    )
+  } catch (error) {
+    return NextResponse.json(
+      {
+        status: 'error',
+        error: error.toString(),
+      },
+      {
+        status: 500,
+      },
+    )
+  }
+}
+
+export const dynamic = 'force-dynamic'

tests/fixtures/next-16-tag-revalidation/app/api/revalidate-tag/route.ts

@@ -0,0 +1,27 @@
+import { NextRequest, NextResponse } from 'next/server'
+import { revalidateTag } from 'next/cache'
+
+export async function GET(request: NextRequest) {
+  const url = new URL(request.url)
+  const tagToRevalidate = url.searchParams.get('tag') ?? 'collection'
+
+  let profile: Parameters<typeof revalidateTag>[1] | undefined | null
+  if (url.searchParams.has('profile')) {
+    profile = url.searchParams.get('profile')
+  } else if (url.searchParams.has('expire')) {
+    profile = {
+      expire: parseInt(url.searchParams.get('expire')),
+    }
+  }
+
+  if (profile) {
+    console.log(`Revalidating tag: ${tagToRevalidate}, profile: ${JSON.stringify(profile)}`)
+
+    revalidateTag(tagToRevalidate, profile)
+    return NextResponse.json({ revalidated: true, now: new Date().toISOString() })
+  } else {
+    return NextResponse.json({ error: 'Missing profile or expire query param' }, { status: 400 })
+  }
+}
+
+export const dynamic = 'force-dynamic'

tests/fixtures/next-16-tag-revalidation/app/layout.js

@@ -0,0 +1,12 @@
+export const metadata = {
+  title: 'Revalidate fetch',
+  description: 'Description for Simple Next App',
+}
+
+export default function RootLayout({ children }) {
+  return (
+    <html lang="en">
+      <body>{children}</body>
+    </html>
+  )
+}