fix: set netlify-cache-tag for not prerendered content (#2495)

* test: refactor app router on-demand revalidation test and add test cases for not prerendered content

* test: refactor pages router on-demand revalidation test and add test cases for not prerendered content

* fix: capture cache tags during request handling and don't rely on tag manifest created for prerendered pages

* Update src/run/handlers/cache.cts

Co-authored-by: Philippe Serhal <philippe.serhal@gmail.com>

* chore: remove dead code

---------

Co-authored-by: Philippe Serhal <philippe.serhal@gmail.com>

Author: pieh

CONTRIBUTING.md

@@ -38,7 +38,6 @@ For a simple next.js app
 ```
 /___netlify-server-handler
 ├── .netlify
-│   ├── tags-manifest.json
 │   └── dist // the compiled runtime code
 │       └── run
 │           ├── handlers

src/build/content/server.ts

@@ -311,47 +311,6 @@ export const copyNextDependencies = async (ctx: PluginContext): Promise<void> =>
   })
 }
 
-export const writeTagsManifest = async (ctx: PluginContext): Promise<void> => {
-  const manifest = await ctx.getPrerenderManifest()
-
-  const routes = Object.entries(manifest.routes).map(async ([route, definition]) => {
-    let tags
-
-    // app router
-    if (definition.dataRoute?.endsWith('.rsc')) {
-      const path = join(ctx.publishDir, `server/app/${route === '/' ? '/index' : route}.meta`)
-      try {
-        const file = await readFile(path, 'utf-8')
-        const meta = JSON.parse(file)
-        tags = meta.headers['x-next-cache-tags']
-      } catch {
-        // Parallel route default layout has no prerendered page, so don't warn about it
-        if (!definition.dataRoute?.endsWith('/default.rsc')) {
-          console.log(`Unable to read cache tags for: ${path}`)
-        }
-      }
-    }
-
-    // pages router
-    if (definition.dataRoute?.endsWith('.json')) {
-      tags = `_N_T_${route}`
-    }
-
-    // route handler
-    if (definition.dataRoute === null) {
-      tags = definition.initialHeaders?.['x-next-cache-tags']
-    }
-
-    return [route, tags]
-  })
-
-  await writeFile(
-    join(ctx.serverHandlerDir, '.netlify/tags-manifest.json'),
-    JSON.stringify(Object.fromEntries(await Promise.all(routes))),
-    'utf-8',
-  )
-}
-
 /**
  * Generates a copy of the middleware manifest without any middleware in it. We
  * do this because we'll run middleware in an edge function, and we don't want

src/build/functions/server.ts

@@ -10,7 +10,6 @@ import {
   copyNextDependencies,
   copyNextServerCode,
   verifyHandlerDirStructure,
-  writeTagsManifest,
 } from '../content/server.js'
 import { PluginContext, SERVER_HANDLER_NAME } from '../plugin-context.js'
 
@@ -138,7 +137,6 @@ export const createServerHandler = async (ctx: PluginContext) => {
 
     await copyNextServerCode(ctx)
     await copyNextDependencies(ctx)
-    await writeTagsManifest(ctx)
     await copyHandlerDependencies(ctx)
     await writeHandlerManifest(ctx)
     await writePackageMetadata(ctx)

src/run/config.ts

@@ -38,9 +38,3 @@ export const setRunConfig = (config: NextConfigComplete) => {
   // set config
   process.env.__NEXT_PRIVATE_STANDALONE_CONFIG = JSON.stringify(config)
 }
-
-export type TagsManifest = Record<string, string>
-
-export const getTagsManifest = async (): Promise<TagsManifest> => {
-  return JSON.parse(await readFile(resolve(PLUGIN_DIR, '.netlify/tags-manifest.json'), 'utf-8'))
-}

src/run/handlers/cache.cts

@@ -109,6 +109,44 @@ export class NetlifyCacheHandler implements CacheHandler {
     return restOfRouteValue
   }
 
+  private captureCacheTags(cacheValue: NetlifyIncrementalCacheValue | null, key: string) {
+    if (!cacheValue) {
+      return
+    }
+
+    const requestContext = getRequestContext()
+    // Bail if we can't get request context
+    if (!requestContext) {
+      return
+    }
+
+    // Bail if we already have cache tags - `captureCacheTags()` is called on both `CacheHandler.get` and `CacheHandler.set`
+    // that's because `CacheHandler.get` might not have a cache value (cache miss or on-demand revalidation) in which case
+    // response is generated in blocking way and we need to capture cache tags from the cache value we are setting.
+    // If both `CacheHandler.get` and `CacheHandler.set` are called in the same request, we want to use cache tags from
+    // first `CacheHandler.get` and not from following `CacheHandler.set` as this is pattern for Stale-while-revalidate behavior
+    // and stale response is served while new one is generated.
+    if (requestContext.responseCacheTags) {
+      return
+    }
+
+    if (
+      cacheValue.kind === 'PAGE' ||
+      cacheValue.kind === 'APP_PAGE' ||
+      cacheValue.kind === 'ROUTE'
+    ) {
+      if (cacheValue.headers?.[NEXT_CACHE_TAGS_HEADER]) {
+        const cacheTags = (cacheValue.headers[NEXT_CACHE_TAGS_HEADER] as string).split(',')
+        requestContext.responseCacheTags = cacheTags
+      } else if (cacheValue.kind === 'PAGE' && typeof cacheValue.pageData === 'object') {
+        // pages router doesn't have cache tags headers in PAGE cache value
+        // so we need to generate appropriate cache tags for it
+        const cacheTags = [`_N_T_${key === '/index' ? '/' : key}`]
+        requestContext.responseCacheTags = cacheTags
+      }
+    }
+  }
+
   private async injectEntryToPrerenderManifest(
     key: string,
     revalidate: NetlifyCachedPageValue['revalidate'],
@@ -176,6 +214,7 @@ export class NetlifyCacheHandler implements CacheHandler {
       }
 
       this.captureResponseCacheLastModified(blob, key, span)
+      this.captureCacheTags(blob.value, key)
 
       switch (blob.value?.kind) {
         case 'FETCH':
@@ -273,6 +312,10 @@ export class NetlifyCacheHandler implements CacheHandler {
 
       const value = this.transformToStorableObject(data, context)
 
+      // if previous CacheHandler.get call returned null (page was either never rendered or was on-demand revalidated)
+      // and we didn't yet capture cache tags, we try to get cache tags from freshly produced cache value
+      this.captureCacheTags(value, key)
+
       await this.blobStore.setJSON(blobKey, {
         lastModified,
         value,

src/run/handlers/request-context.cts

@@ -10,6 +10,7 @@ export type RequestContext = {
   captureServerTiming: boolean
   responseCacheGetLastModified?: number
   responseCacheKey?: string
+  responseCacheTags?: string[]
   usedFsRead?: boolean
   didPagesRouterOnDemandRevalidate?: boolean
   serverTiming?: string

src/run/handlers/server.ts

@@ -5,7 +5,6 @@ import { Context } from '@netlify/functions'
 import type { NextConfigComplete } from 'next/dist/server/config-shared.js'
 import type { WorkerRequestHandler } from 'next/dist/server/lib/types.js'
 
-import { getTagsManifest, TagsManifest } from '../config.js'
 import {
   adjustDateHeader,
   setCacheControlHeaders,
@@ -20,7 +19,7 @@ import { getTracer } from './tracer.cjs'
 
 const nextImportPromise = import('../next.cjs')
 
-let nextHandler: WorkerRequestHandler, nextConfig: NextConfigComplete, tagsManifest: TagsManifest
+let nextHandler: WorkerRequestHandler, nextConfig: NextConfigComplete
 
 /**
  * When Next.js proxies requests externally, it writes the response back as-is.
@@ -55,21 +54,11 @@ export default async (request: Request, context: FutureContext) => {
   const tracer = getTracer()
 
   if (!nextHandler) {
-    await tracer.withActiveSpan('initialize next server', async (span) => {
+    await tracer.withActiveSpan('initialize next server', async () => {
       // set the server config
       const { getRunConfig, setRunConfig } = await import('../config.js')
       nextConfig = await getRunConfig()
       setRunConfig(nextConfig)
-      tagsManifest = await getTagsManifest()
-      span.setAttributes(
-        Object.entries(tagsManifest).reduce(
-          (acc, [key, value]) => {
-            acc[`tagsManifest.${key}`] = value
-            return acc
-          },
-          {} as Record<string, string>,
-        ),
-      )
 
       const { getMockedRequestHandlers } = await nextImportPromise
       const url = new URL(request.url)
@@ -124,7 +113,7 @@ export default async (request: Request, context: FutureContext) => {
     await adjustDateHeader({ headers: response.headers, request, span, tracer, requestContext })
 
     setCacheControlHeaders(response.headers, request, requestContext)
-    setCacheTagsHeaders(response.headers, request, tagsManifest, requestContext)
+    setCacheTagsHeaders(response.headers, requestContext)
     setVaryHeaders(response.headers, request, nextConfig)
     setCacheStatusHeader(response.headers)
 

src/run/headers.ts

@@ -3,7 +3,6 @@ import type { NextConfigComplete } from 'next/dist/server/config-shared.js'
 
 import { encodeBlobKey } from '../shared/blobkey.js'
 
-import type { TagsManifest } from './config.js'
 import type { RequestContext } from './handlers/request-context.cjs'
 import type { RuntimeTracer } from './handlers/tracer.cjs'
 import { getRegionalBlobStore } from './regional-blob-store.cjs'
@@ -275,21 +274,9 @@ export const setCacheControlHeaders = (
   }
 }
 
-function getCanonicalPathFromCacheKey(cacheKey: string | undefined): string | undefined {
-  return cacheKey === '/index' ? '/' : cacheKey
-}
-
-export const setCacheTagsHeaders = (
-  headers: Headers,
-  request: Request,
-  manifest: TagsManifest,
-  requestContext: RequestContext,
-) => {
-  const path =
-    getCanonicalPathFromCacheKey(requestContext.responseCacheKey) ?? new URL(request.url).pathname
-  const tags = manifest[path]
-  if (tags !== undefined) {
-    headers.set('netlify-cache-tag', tags)
+export const setCacheTagsHeaders = (headers: Headers, requestContext: RequestContext) => {
+  if (requestContext.responseCacheTags) {
+    headers.set('netlify-cache-tag', requestContext.responseCacheTags.join(','))
   }
 }
 

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

@@ -0,0 +1,40 @@
+const Product = ({ time, slug }) => (
+  <div>
+    <h1>Product {slug}</h1>
+    <p>
+      This page uses getStaticProps() and getStaticPaths() to pre-fetch a Product
+      <span data-testid="date-now">{time}</span>
+    </p>
+  </div>
+)
+
+export async function getStaticProps({ params }) {
+  return {
+    props: {
+      time: new Date().toISOString(),
+      slug: params.slug,
+    },
+  }
+}
+
+export const getStaticPaths = () => {
+  return {
+    paths: [
+      {
+        params: {
+          slug: 'prerendered',
+        },
+        locale: 'en',
+      },
+      {
+        params: {
+          slug: 'prerendered',
+        },
+        locale: 'de',
+      },
+    ],
+    fallback: 'blocking', // false or "blocking"
+  }
+}
+
+export default Product

tests/e2e/page-router.test.ts

@@ -1,6 +1,7 @@
 export default async function handler(req, res) {
   try {
-    await res.revalidate('/static/revalidate-manual')
+    const pathToPurge = req.query.path ?? '/static/revalidate-manual'
+    await res.revalidate(pathToPurge)
     return res.json({ code: 200, message: 'success' })
   } catch (err) {
     return res.status(500).send({ code: 500, message: err.message })

tests/fixtures/page-router-base-path-i18n/pages/products/[slug].js

@@ -1,16 +1,18 @@
-const Product = ({ time }) => (
+const Product = ({ time, slug }) => (
   <div>
+    <h1>Product {slug}</h1>
     <p>
       This page uses getStaticProps() and getStaticPaths() to pre-fetch a Product
       <span data-testid="date-now">{time}</span>
     </p>
   </div>
 )
 
-export async function getStaticProps() {
+export async function getStaticProps({ params }) {
   return {
     props: {
       time: new Date().toISOString(),
+      slug: params.slug,
     },
   }
 }
@@ -23,8 +25,13 @@ export const getStaticPaths = () => {
           slug: 'an-incredibly-long-product-name-thats-impressively-repetetively-needlessly-overdimensioned-and-should-be-shortened-to-less-than-255-characters-for-the-sake-of-seo-and-ux-and-first-and-foremost-for-gods-sake-but-nobody-wont-ever-read-this-anyway',
         },
       },
+      {
+        params: {
+          slug: 'prerendered',
+        },
+      },
     ],
-    fallback: false, // false or "blocking"
+    fallback: 'blocking', // false or "blocking"
   }
 }
 

tests/fixtures/page-router/pages/api/revalidate.js

@@ -2,7 +2,10 @@ import { NextRequest, NextResponse } from 'next/server'
 import { revalidatePath } from 'next/cache'
 
 export async function GET(request: NextRequest) {
-  revalidatePath('/static-fetch/[id]', 'page')
+  const url = new URL(request.url)
+  const pathToRevalidate = url.searchParams.get('path') ?? '/static-fetch/[id]/page'
+
+  revalidatePath(pathToRevalidate)
   return NextResponse.json({ revalidated: true, now: new Date().toISOString() })
 }
 

tests/fixtures/page-router/pages/products/[slug].js

@@ -2,7 +2,10 @@ import { NextRequest, NextResponse } from 'next/server'
 import { revalidateTag } from 'next/cache'
 
 export async function GET(request: NextRequest) {
-  revalidateTag('collection')
+  const url = new URL(request.url)
+  const tagToRevalidate = url.searchParams.get('tag') ?? 'collection'
+
+  revalidateTag(tagToRevalidate)
   return NextResponse.json({ revalidated: true, now: new Date().toISOString() })
 }
 

tests/fixtures/server-components/app/api/on-demand-revalidate/path/route.ts

@@ -3,7 +3,11 @@ export async function generateStaticParams() {
 }
 
 async function getData(params) {
-  const res = await fetch(`https://api.tvmaze.com/shows/${params.id}`)
+  const res = await fetch(`https://api.tvmaze.com/shows/${params.id}`, {
+    next: {
+      tags: [`show-${params.id}`],
+    },
+  })
   return res.json()
 }
 

tests/fixtures/server-components/app/api/on-demand-revalidate/tag/route.ts

@@ -45,6 +45,7 @@ describe('page router', () => {
     expect(blobEntries.map(({ key }) => decodeBlobKey(key.substring(0, 50))).sort()).toEqual([
       // the real key is much longer and ends in a hash, but we only assert on the first 50 chars to make it easier
       '/products/an-incredibly-long-product-',
+      '/products/prerendered',
       '/static/revalidate-automatic',
       '/static/revalidate-manual',
       '/static/revalidate-slow',

tests/fixtures/server-components/app/static-fetch/[id]/page.js

@@ -35,6 +35,7 @@ test<FixtureTestContext>('requesting a non existing page route that needs to be
   const entries = await getBlobEntries(ctx)
   expect(entries.map(({ key }) => decodeBlobKey(key.substring(0, 50))).sort()).toEqual([
     '/products/an-incredibly-long-product-',
+    '/products/prerendered',
     '/static/revalidate-automatic',
     '/static/revalidate-manual',
     '/static/revalidate-slow',

tests/integration/cache-handler.test.ts

@@ -3,7 +3,6 @@ import getPort from 'get-port'
 import { getDeployStore } from '@netlify/blobs'
 import { BlobsServer } from '@netlify/blobs/server'
 import type { NetlifyPluginUtils } from '@netlify/build'
-import IncrementalCache from 'next/dist/server/lib/incremental-cache/index.js'
 import { Buffer } from 'node:buffer'
 import { mkdtemp } from 'node:fs/promises'
 import { tmpdir } from 'node:os'
@@ -12,20 +11,6 @@ import { assert, vi } from 'vitest'
 import { BLOB_TOKEN } from './constants'
 import { type FixtureTestContext } from './contexts'
 
-/**
- * Uses next.js incremental cache to compute the same cache key for a URL that is automatically generated
- * This is needed for mocking out fetch calls to test them
- */
-export const getFetchCacheKey = async (url: string) => {
-  const incCache = new IncrementalCache.IncrementalCache({
-    requestHeaders: {},
-    getPrerenderManifest: () => ({}),
-  } as any)
-
-  const key = await incCache.fetchCacheKey(url)
-  return key
-}
-
 /**
  * Generates a 24char deploy ID (this is validated in the blob storage so we cant use a uuidv4)
  * @returns