feat: cache tags & on-demand Revalidation for pages (#50)

* feat: proxying res obj

* check blob for cachetag

* add cache-tags to pages/app

* added types

* removed hard coded deploy ID

* removed extra comma

* fix tag format for purge and add manifest

* refactoring

* add pageData var

* updated setcacheheaders logic

* initial testing for cache-tags

* updated unit test page data

* cache-tags integration tests for app

* page router tests

* integration test for pages revalidate

* lock file

* chore: fix tests

* chore: update tests

* feat: readd missing mockRequestHandlers

* chore: fix tests

---------

Co-authored-by: Rob Stanford <[email protected]>

Author: taty2010

package-lock.json

@@ -39,7 +39,7 @@
   "homepage": "https://github.com/netlify/next-runtime-minimal#readme",
   "dependencies": {
     "@fastly/http-compute-js": "1.1.1",
-    "@netlify/blobs": "^4.0.0",
+    "@netlify/blobs": "^4.1.0",
     "@netlify/build": "^29.20.6",
     "@netlify/functions": "^2.0.1",
     "@vercel/nft": "^0.24.3",
@@ -61,6 +61,7 @@
     "get-port": "^7.0.0",
     "lambda-local": "^2.1.2",
     "memfs": "^4.6.0",
+    "msw": "^2.0.7",
     "next": "^13.5.4",
     "typescript": "^5.1.6",
     "unionfs": "^4.5.1",

package.json

@@ -19,7 +19,7 @@ export type CacheEntryValue = {
   value: PageCacheValue | RouteCacheValue | FetchCacheValue
 }
 
-type PageCacheValue = {
+export type PageCacheValue = {
   kind: 'PAGE'
   html: string
   pageData: string

src/build/content/prerendered.ts

@@ -13,6 +13,7 @@ import { NEXT_CACHE_TAGS_HEADER } from 'next/dist/lib/constants.js'
 import { join } from 'node:path/posix'
 // @ts-expect-error This is a type only import
 import type { CacheEntryValue } from '../../build/content/prerendered.js'
+import type { PrerenderManifest } from 'next/dist/build/index.js'
 
 type TagManifest = { revalidatedAt: number }
 
@@ -29,7 +30,28 @@ function toRoute(pathname: string): string {
   return pathname.replace(/\/$/, '').replace(/\/index$/, '') || '/'
 }
 
-export default class NetlifyCacheHandler implements CacheHandler {
+// borrowed from https://github.com/vercel/next.js/blob/canary/packages/next/src/shared/lib/page-path/normalize-page-path.ts#L14
+function ensureLeadingSlash(path: string): string {
+  return path.startsWith('/') ? path : `/${path}`
+}
+
+function isDynamicRoute(path: string): void | boolean {
+  const dynamicRoutes: PrerenderManifest['dynamicRoutes'] = prerenderManifest.dynamicRoutes
+  Object.values(dynamicRoutes).find((route) => {
+    return new RegExp(route.routeRegex).test(path)
+  })
+}
+
+function normalizePath(path: string): string {
+  // If there is a page that is '/index' the first statement ensures that it will be '/index/index'
+  return /^\/index(\/|$)/.test(path) && !isDynamicRoute(path)
+    ? `/index${path}`
+    : path === '/'
+    ? '/index'
+    : ensureLeadingSlash(path)
+}
+
+module.exports = class NetlifyCacheHandler implements CacheHandler {
   options: CacheHandlerContext
   revalidatedTags: string[]
   /** Indicates if the application is using the new appDir */
@@ -156,8 +178,10 @@ export default class NetlifyCacheHandler implements CacheHandler {
         isAppPath: boolean
       } & CacheEntryValue)
   > {
-    const appKey = join('server/app', key)
-    const pagesKey = join('server/pages', key)
+    const normalizedKey = normalizePath(key)
+    // Want to avoid normalizaing if '/index' is being passed as a key.
+    const appKey = join('server/app', key === '/index' ? key : normalizedKey)
+    const pagesKey = join('server/pages', key === '/index' ? key : normalizedKey)
     const fetchKey = join('cache/fetch-cache', key)
 
     if (fetch) {
@@ -223,7 +247,7 @@ export default class NetlifyCacheHandler implements CacheHandler {
 
     const isStale = cacheTags.some((tag) => {
       // TODO: test for this case
-      if (this.revalidatedTags.includes(tag)) {
+      if (tag && this.revalidatedTags?.includes(tag)) {
         return true
       }
 

src/run/handlers/cache.cts

@@ -2,10 +2,18 @@ import { toComputeResponse, toReqRes } from '@fastly/http-compute-js'
 import { HeadersSentEvent } from '@fastly/http-compute-js/dist/http-compute-js/http-outgoing.js'
 import type { NextConfigComplete } from 'next/dist/server/config-shared.js'
 import type { WorkerRequestHandler } from 'next/dist/server/lib/types.js'
+import { readFileSync } from 'node:fs'
+import { join } from 'node:path/posix'
+import { CacheEntryValue, PageCacheValue } from '../../build/content/prerendered.js'
 import { RUN_DIR } from '../constants.js'
 import { setCacheControlHeaders, setCacheTagsHeaders, setVaryHeaders } from '../headers.js'
+import { nextResponseProxy } from '../revalidate.js'
 
-let nextHandler: WorkerRequestHandler, nextConfig: NextConfigComplete
+export type PageCacheEntry = CacheEntryValue & { value: PageCacheValue }
+
+let nextHandler: WorkerRequestHandler,
+  nextConfig: NextConfigComplete,
+  cacheEntry: PageCacheEntry | undefined | null
 
 export default async (request: Request) => {
   if (!nextHandler) {
@@ -14,6 +22,8 @@ export default async (request: Request) => {
     nextConfig = await getRunConfig()
     setRunConfig(nextConfig)
 
+    cacheEntry = await getCacheEntry(request)
+
     const { getMockedRequestHandlers } = await import('./next.cjs')
 
     ;[nextHandler] = await getMockedRequestHandlers({
@@ -26,27 +36,54 @@ export default async (request: Request) => {
 
   const { req, res } = toReqRes(request)
 
-  res.prependListener('_headersSent', (event: HeadersSentEvent) => {
+  const resProxy = nextResponseProxy(res)
+
+  resProxy.prependListener('_headersSent', (event: HeadersSentEvent) => {
     const headers = new Headers(event.headers)
     setCacheControlHeaders(headers)
-    setCacheTagsHeaders(headers)
+    setCacheTagsHeaders(request, headers, cacheEntry)
     setVaryHeaders(headers, request, nextConfig)
     event.headers = Object.fromEntries(headers.entries())
     // console.log('Modified response headers:', JSON.stringify(event.headers, null, 2))
   })
 
   try {
-    console.log('Next server request:', req.url)
-    await nextHandler(req, res)
+    // console.log('Next server request:', req.url)
+    await nextHandler(req, resProxy)
   } catch (error) {
     console.error(error)
-    res.statusCode = 500
-    res.end('Internal Server Error')
+    resProxy.statusCode = 500
+    resProxy.end('Internal Server Error')
   }
 
   // log the response from Next.js
-  const response = { headers: res.getHeaders(), statusCode: res.statusCode }
+  const response = {
+    headers: resProxy.getHeaders(),
+    statusCode: resProxy.statusCode,
+  }
   // console.log('Next server response:', JSON.stringify(response, null, 2))
 
-  return toComputeResponse(res)
+  return toComputeResponse(resProxy)
+}
+
+const prerenderManifest = JSON.parse(
+  readFileSync(join(process.cwd(), '.next/prerender-manifest.json'), 'utf-8'),
+)
+
+const getCacheEntry = async (request: Request) => {
+  // dynamically importing to avoid calling NetlifyCacheHandler beforhand
+  // @ts-expect-error
+  const NetlifyCacheHandler = await import('../../../dist/run/handlers/cache.cjs')
+  // Have to assign NetlifyCacheHandler.default to new variable to prevent error: `X is not a constructor`
+  const CacheHandler = NetlifyCacheHandler.default
+  const cache = new CacheHandler({
+    _appDir: true,
+    revalidateTags: [],
+    _requestHandler: {},
+  })
+  const path = new URL(request.url).pathname
+  // Checking if route is in prerender manifest before retrieving pageData from Blob
+  if (prerenderManifest.routes[path]) {
+    return await cache.get(path, { type: 'json' })
+  }
 }

src/run/handlers/server.ts

@@ -1,6 +1,7 @@
 import { expect, test, describe, vi, afterEach } from 'vitest'
 import { setCacheControlHeaders, setVaryHeaders, setCacheTagsHeaders } from './headers.js'
 import type { NextConfigComplete } from 'next/dist/server/config-shared.js'
+import { PageCacheValue } from '../build/content/prerendered.js'
 
 describe('headers', () => {
   afterEach(() => {
@@ -243,8 +244,59 @@ describe('headers', () => {
   })
 
   describe('setCacheTagsHeaders', () => {
-    test('TODO: function is not yet implemented', () => {
-      expect(setCacheTagsHeaders(new Headers())).toBeUndefined()
+    const appValue = {
+      kind: 'PAGE',
+      html: '<!DOCTYPE html><html lang="en">',
+      pageData: 'Data from rsc file',
+      headers: { 'x-next-cache-tags': '_N_T_/layout,_N_T_/page,_N_T_/' },
+      status: 200,
+    } satisfies PageCacheValue
+
+    const pageValue = {
+      kind: 'PAGE',
+      html: '<!DOCTYPE html><html lang="en">',
+      pageData: { pageProps: { foo: 'bar' } },
+      status: 200,
+    } satisfies PageCacheValue | { pageData: Object }
+
+    test('Should set cache-tag header for app routes using tag in headers[x-next-cache-tags] from cache value', () => {
+      const cacheEntry = {
+        lastModified: 1699843226944,
+        value: appValue,
+      }
+
+      const headers = new Headers()
+      vi.spyOn(headers, 'set')
+      setCacheTagsHeaders(new Request('https://example.com/index'), headers, cacheEntry)
+
+      expect(headers.set).toHaveBeenNthCalledWith(1, 'cache-tag', '_N_T_/layout,_N_T_/page,_N_T_/')
+    })
+
+    test('Should set cache-tag header for page routes using pathname as the tag', () => {
+      const cacheEntry: any = {
+        lastModified: 1699843226944,
+        value: pageValue,
+      }
+
+      const headers = new Headers()
+      vi.spyOn(headers, 'set')
+      setCacheTagsHeaders(new Request('https://example.com/index'), headers, cacheEntry)
+
+      expect(headers.set).toHaveBeenNthCalledWith(1, 'cache-tag', '/index')
+    })
+
+    test('Should not return any cache-tags if data is null', () => {
+      const cacheEntry: any = {
+        lastModified: 1699843226944,
+        value: null,
+      }
+
+      const headers = new Headers()
+      vi.spyOn(headers, 'set')
+
+      expect(
+        setCacheTagsHeaders(new Request('https://example.com/index'), headers, cacheEntry),
+      ).toBeUndefined()
     })
   })
 })

src/run/headers.test.ts

@@ -1,4 +1,5 @@
 import type { NextConfigComplete } from 'next/dist/server/config-shared.js'
+import type { PageCacheEntry } from './handlers/server.js'
 
 interface NetlifyVaryValues {
   headers: string[]
@@ -83,6 +84,23 @@ export const setCacheControlHeaders = (headers: Headers) => {
   }
 }
 
-export const setCacheTagsHeaders = (headers: Headers) => {
-  // TODO: implement
+export const setCacheTagsHeaders = (
+  request: Request,
+  headers: Headers,
+  cacheEntry: PageCacheEntry | undefined | null,
+) => {
+  const pageData = cacheEntry?.value?.pageData
+  const cacheHeaders = cacheEntry?.value?.headers
+  const path = new URL(request.url).pathname
+
+  // Page Data for app chould be a string, Pages should be an obj
+  if (pageData && typeof pageData === 'string' && cacheHeaders?.['x-next-cache-tags']) {
+    console.debug('Cache values for app routes:', cacheHeaders['x-next-cache-tags'])
+    headers.set('cache-tag', cacheHeaders['x-next-cache-tags'])
+  }
+
+  if (pageData && typeof pageData === 'object') {
+    console.debug('Cache values for Page routes', cacheEntry)
+    headers.set('cache-tag', path)
+  }
 }

src/run/headers.ts

@@ -0,0 +1,25 @@
+import { purgeCache } from '@netlify/functions'
+import type { ServerResponse } from 'node:http'
+
+// Needing to proxy the response object to intercept the revalidate call for on-demand revalidation on page routes
+export const nextResponseProxy = (res: ServerResponse) => {
+  return new Proxy(res, {
+    get(target: any[string], key: string) {
+      const originalValue = target[key]
+      if (key === 'revalidate') {
+        return async function newRevalidate(...args: any[]) {
+          try {
+            console.debug('Purging cache for:', [args[0]])
+            await purgeCache({ tags: [args[0]] })
+          } catch (err) {
+            throw new Error(
+              `An internal error occurred while trying to purge cache for ${args[0]}}`,
+            )
+          }
+          return originalValue?.apply(target, args)
+        }
+      }
+      return originalValue
+    },
+  })
+}

src/run/revalidate.ts

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

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

@@ -0,0 +1,25 @@
+const Show = ({ show, time }) => (
+  <div>
+    <p>
+      This page uses getStaticProps() to pre-fetch a TV show at
+      <span data-testid="date-now">{time}</span>
+    </p>
+    <hr />
+    <h1>Show #{show.id}</h1>
+    <p>{show.name}</p>
+  </div>
+)
+
+export async function getStaticProps(context) {
+  const res = await fetch(`https://tvproxy.netlify.app/shows/71`)
+  const data = await res.json()
+
+  return {
+    props: {
+      show: data,
+      time: new Date().toISOString(),
+    },
+  }
+}
+
+export default Show

tests/fixtures/page-router/pages/static/revalidate.js renamed to tests/fixtures/page-router/pages/static/revalidate-automatic.js

@@ -35,11 +35,12 @@ describe('page router', () => {
     expect(blobEntries.map(({ key }) => key).sort()).toEqual([
       'server/pages/404.html',
       'server/pages/500.html',
-      'server/pages/static/revalidate',
+      'server/pages/static/revalidate-automatic',
+      'server/pages/static/revalidate-manual',
     ])
 
     // test the function call
-    const call1 = await invokeFunction(ctx, { url: 'static/revalidate' })
+    const call1 = await invokeFunction(ctx, { url: 'static/revalidate-automatic' })
     const call1Date = load(call1.body)('[data-testid="date-now"]').text()
     expect(call1.statusCode).toBe(200)
     expect(load(call1.body)('h1').text()).toBe('Show #71')
@@ -54,7 +55,7 @@ describe('page router', () => {
     await new Promise<void>((resolve) => setTimeout(resolve, 3_000))
 
     // now it should be a cache miss
-    const call2 = await invokeFunction(ctx, { url: 'static/revalidate' })
+    const call2 = await invokeFunction(ctx, { url: 'static/revalidate-automatic' })
     const call2Date = load(call2.body)('[data-testid="date-now"]').text()
     expect(call2.statusCode).toBe(200)
     expect(call2.headers, 'a cache miss on a stale page').toEqual(
@@ -68,7 +69,7 @@ describe('page router', () => {
     await new Promise<void>((resolve) => setTimeout(resolve, 100))
 
     // now the page should be in cache again and we should get a cache hit
-    const call3 = await invokeFunction(ctx, { url: 'static/revalidate' })
+    const call3 = await invokeFunction(ctx, { url: 'static/revalidate-automatic' })
     const call3Date = load(call3.body)('[data-testid="date-now"]').text()
     expect(call2Date, 'the date was not cached').toBe(call3Date)
     expect(call3.statusCode).toBe(200)
@@ -205,7 +206,7 @@ describe('route', () => {
       }),
     )
     // wait to have a stale route
-    await new Promise<void>((resolve) => setTimeout(resolve, 2_000))
+    await new Promise<void>((resolve) => setTimeout(resolve, 3_000))
 
     const call2 = await invokeFunction(ctx, { url: '/api/revalidate-handler' })
     const call2Body = JSON.parse(call2.body)