feat: add FETCH cache (#46)

* feat: add FETCH cache

Fixes https://linear.app/netlify/issue/FRA-60/implement-get-and-set

* chore: close the connection

* chore: update

* chore: update

* chore: increase lambda timeout

* chore: fix tests

* chore: cleanup

* chore: cleanup and splitup for better performance

* chore: update

* chore: update

* chore: build custom test sharding as the fetch test needs to run on it's own executor due to side effects of next.js patching the fetch function

* chore: update

Author: lukasholzer

.github/workflows/run-tests.yml

@@ -5,16 +5,21 @@ on:
 jobs:
   test:
     runs-on: ubuntu-latest
-
+    strategy:
+      matrix:
+        shard: [1/3, 2/3, 3/3]
     steps:
       - uses: actions/checkout@v4
       - name: 'Install Node'
         uses: actions/setup-node@v3
         with:
           node-version: '18.x'
+          cache: 'npm'
+          cache-dependency-path: '**/package-lock.json'
+
       - name: 'Install dependencies'
         run: npm ci
       - name: 'build'
         run: npm run build
       - name: 'Test'
-        run: npm run test:ci
+        run: npm run test:ci -- --shard=${{ matrix.shard }}

src/build/content/prerendered.ts

@@ -111,7 +111,7 @@ const buildPrerenderedContentEntries = async (cwd: string): Promise<Promise<Cach
       if (isFetch(path)) {
         value = {
           kind: 'FETCH',
-          data: JSON.parse(await readFile(`${cwd}/${key}`, 'utf-8')),
+          ...JSON.parse(await readFile(`${cwd}/${key}`, 'utf-8')),
         } satisfies FetchCacheValue
       }
 

src/run/handlers/cache.cts

@@ -45,28 +45,35 @@ export default class NetlifyCacheHandler implements CacheHandler {
     console.debug(`[NetlifyCacheHandler.get]: ${cacheKey}`)
     const blob = await this.getBlobKey(cacheKey, ctx.fetchCache)
 
+    // if blob is null then we don't have a cache entry
     if (!blob) {
       return null
     }
 
-    const revalidateAfter = this.calculateRevalidate(cacheKey, blob.lastModified)
+    const revalidateAfter = this.calculateRevalidate(cacheKey, blob.lastModified, ctx)
     // first check if there is a tag manifest
     // if not => stale check with revalidateAfter
     // yes => check with manifest
     const isStale = revalidateAfter !== false && revalidateAfter < Date.now()
-    console.debug(`!!! CHACHE KEY: ${cacheKey} - is stale: `, {
-      isStale,
-      revalidateAfter,
-    })
+    console.debug(`!!! CHACHE KEY: ${cacheKey} - is stale: `, { isStale })
     if (isStale) {
       return null
     }
 
     switch (blob.value.kind) {
-      // TODO:
-      // case 'FETCH':
+      case 'FETCH':
+        return {
+          lastModified: blob.lastModified,
+          value: {
+            kind: blob.value.kind,
+            data: blob.value.data,
+            revalidate: ctx.revalidate || 1,
+          },
+        }
+
       case 'ROUTE':
         return {
+          lastModified: blob.lastModified,
           value: {
             body: Buffer.from(blob.value.body),
             kind: blob.value.kind,
@@ -79,11 +86,7 @@ export default class NetlifyCacheHandler implements CacheHandler {
           lastModified: blob.lastModified,
           value: blob.value,
         }
-
-      default:
-        console.log('TODO: implement NetlifyCacheHandler.get', blob)
     }
-    return null
   }
 
   async set(...args: Parameters<IncrementalCache['set']>) {
@@ -192,11 +195,20 @@ export default class NetlifyCacheHandler implements CacheHandler {
   /**
    * Retrieves the milliseconds since midnight, January 1, 1970 when it should revalidate for a path.
    */
-  private calculateRevalidate(pathname: string, fromTime: number, dev?: boolean): number | false {
+  private calculateRevalidate(
+    pathname: string,
+    fromTime: number,
+    ctx: Parameters<CacheHandler['get']>[1],
+    dev?: boolean,
+  ): number | false {
     // in development we don't have a prerender-manifest
     // and default to always revalidating to allow easier debugging
     if (dev) return Date.now() - 1_000
 
+    if (ctx?.revalidate && typeof ctx.revalidate === 'number') {
+      return fromTime + ctx.revalidate * 1_000
+    }
+
     // if an entry isn't present in routes we fallback to a default
     const { initialRevalidateSeconds } = prerenderManifest.routes[toRoute(pathname)] || {
       initialRevalidateSeconds: 0,

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

@@ -19,7 +19,7 @@ export async function getStaticProps(context) {
       show: data,
       time: new Date().toISOString(),
     },
-    revalidate: 2, // In seconds
+    revalidate: 3, // In seconds
   }
 }
 

tests/fixtures/revalidate-fetch/app/posts/[id]/page.js

@@ -1,11 +1,12 @@
-const revalidateSeconds = 3
+const revalidateSeconds = +process.env.REVALIDATE_SECONDS || 3
+const API_BASE = process.env.API_BASE || 'https://api.tvmaze.com/shows/'
 
 export async function generateStaticParams() {
   return [{ id: '1' }, { id: '2' }]
 }
 
 async function getData(params) {
-  const res = await fetch(`https://api.tvmaze.com/shows/${params.id}`, {
+  const res = await fetch(new URL(params.id, API_BASE).href, {
     next: { revalidate: revalidateSeconds },
   })
   return res.json()
@@ -21,9 +22,9 @@ export default async function Page({ params }) {
       <p>Revalidating every {revalidateSeconds} seconds</p>
       <dl>
         <dt>Show</dt>
-        <dd>{data.name}</dd>
+        <dd data-testid="name">{data.name}</dd>
         <dt>Param</dt>
-        <dd>{params.id}</dd>
+        <dd data-testid="id">{params.id}</dd>
         <dt>Time</dt>
         <dd data-testid="date-now">{Date.now()}</dd>
       </dl>

tests/integration/cache-handler.test.ts

@@ -8,12 +8,7 @@ import {
   runPlugin,
   type FixtureTestContext,
 } from '../utils/fixture.js'
-import {
-  createBlobContext,
-  generateRandomObjectID,
-  getBlobEntries,
-  startMockBlobStore,
-} from '../utils/helpers.js'
+import { generateRandomObjectID, getBlobEntries, startMockBlobStore } from '../utils/helpers.js'
 
 // Disable the verbose logging of the lambda-local runtime
 getLogger().level = 'alert'
@@ -23,6 +18,8 @@ beforeEach<FixtureTestContext>(async (ctx) => {
   ctx.deployID = generateRandomObjectID()
   ctx.siteID = v4()
   vi.stubEnv('DEPLOY_ID', ctx.deployID)
+  // hide debug logs in tests
+  // vi.spyOn(console, 'debug').mockImplementation(() => {})
 
   await startMockBlobStore(ctx)
 })
@@ -48,12 +45,12 @@ 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=2, stale-while-revalidate',
+        'netlify-cdn-cache-control': 's-maxage=3, stale-while-revalidate',
       }),
     )
 
     // wait to have a stale page
-    await new Promise<void>((resolve) => setTimeout(resolve, 1_000))
+    await new Promise<void>((resolve) => setTimeout(resolve, 2_000))
 
     // now it should be a cache miss
     const call2 = await invokeFunction(ctx, { url: 'static/revalidate' })
@@ -83,27 +80,6 @@ describe('page router', () => {
 })
 
 describe('app router', () => {
-  test<FixtureTestContext>('Test that the simple next app is working', async (ctx) => {
-    await createFixture('simple-next-app', ctx)
-    await runPlugin(ctx)
-    // check if the blob entries where successful set on the build plugin
-    const blobEntries = await getBlobEntries(ctx)
-    expect(blobEntries).toEqual([
-      { key: 'server/app/_not-found', etag: expect.any(String) },
-      { key: 'server/app/index', etag: expect.any(String) },
-      { key: 'server/app/other', etag: expect.any(String) },
-    ])
-
-    // test the function call
-    const home = await invokeFunction(ctx)
-    expect(home.statusCode).toBe(200)
-    expect(load(home.body)('h1').text()).toBe('Home')
-
-    const other = await invokeFunction(ctx, { url: 'other' })
-    expect(other.statusCode).toBe(200)
-    expect(load(other.body)('h1').text()).toBe('Other')
-  })
-
   test<FixtureTestContext>('should have a page prerendered, then wait for it to get stale and on demand revalidate it', async (ctx) => {
     await createFixture('revalidate-fetch', ctx)
     console.time('runPlugin')
@@ -179,7 +155,9 @@ describe('app router', () => {
       }),
     )
   })
+})
 
+describe('plugin', () => {
   test<FixtureTestContext>('server-components blob store created correctly', async (ctx) => {
     await createFixture('server-components', ctx)
     await runPlugin(ctx)
@@ -202,7 +180,9 @@ describe('app router', () => {
       { key: 'server/app/static-fetch-2', etag: expect.any(String) },
     ])
   })
+})
 
+describe('route', () => {
   test<FixtureTestContext>('route handler with revalidate', async (ctx) => {
     await createFixture('server-components', ctx)
     await runPlugin(ctx)
@@ -228,20 +208,20 @@ describe('app router', () => {
       }),
     )
     // wait to have a stale route
-    await new Promise<void>((resolve) => setTimeout(resolve, 1_500))
+    await new Promise<void>((resolve) => setTimeout(resolve, 2_000))
 
     const call2 = await invokeFunction(ctx, { url: '/api/revalidate-handler' })
     const call2Body = JSON.parse(call2.body)
     const call2Time = call2Body.time
     expect(call2.statusCode).toBe(200)
     // it should have a new date rendered
-    expect(call1Time, 'the date is a new one on a stale route').not.toBe(call2Time)
     expect(call2Body).toMatchObject({ data: expect.objectContaining({ id: 1 }) })
     expect(call2.headers, 'a cache miss on a stale route').toEqual(
       expect.objectContaining({
         'x-nextjs-cache': 'MISS',
       }),
     )
+    expect(call1Time, 'the date is a new one on a stale route').not.toBe(call2Time)
 
     // it does not wait for the cache.set so we have to manually wait here until the blob storage got populated
     await new Promise<void>((resolve) => setTimeout(resolve, 100))
@@ -250,12 +230,12 @@ describe('app router', () => {
     expect(call3.statusCode).toBe(200)
     const call3Body = JSON.parse(call3.body)
     const call3Time = call3Body.time
-    expect(call3Time, 'the date was cached as well').toBe(call2Time)
     expect(call3Body).toMatchObject({ data: expect.objectContaining({ id: 1 }) })
     expect(call3.headers, 'a cache hit after dynamically regenerating the stale  route').toEqual(
       expect.objectContaining({
         'x-nextjs-cache': 'HIT',
       }),
     )
+    expect(call3Time, 'the date was cached as well').toBe(call2Time)
   })
 })

tests/integration/fetch-handler.test.ts

@@ -0,0 +1,128 @@
+import { load } from 'cheerio'
+import getPort from 'get-port'
+import { getLogger } from 'lambda-local'
+import { createServer, type Server } from 'node:http'
+import { v4 } from 'uuid'
+import { afterAll, beforeAll, beforeEach, expect, test, vi } from 'vitest'
+import {
+  createFixture,
+  invokeFunction,
+  runPlugin,
+  type FixtureTestContext,
+} from '../utils/fixture.js'
+import {
+  generateRandomObjectID,
+  getBlobEntries,
+  getFetchCacheKey,
+  startMockBlobStore,
+} from '../utils/helpers.js'
+
+// Disable the verbose logging of the lambda-local runtime
+getLogger().level = 'alert'
+
+beforeEach<FixtureTestContext>(async (ctx) => {
+  // set for each test a new deployID and siteID
+  ctx.deployID = generateRandomObjectID()
+  ctx.siteID = v4()
+  vi.stubEnv('DEPLOY_ID', ctx.deployID)
+  // hide debug logs in tests
+  // vi.spyOn(console, 'debug').mockImplementation(() => {})
+
+  await startMockBlobStore(ctx)
+})
+
+let apiBase: string
+let testServer: Server
+let handlerCalled = 0
+
+beforeAll(async () => {
+  // create a fake endpoint to test if it got called
+  const port = await getPort({ host: '0.0.0.0' })
+
+  testServer = createServer((_, res) => {
+    handlerCalled++
+    res.writeHead(200, {
+      'Content-Type': 'application/json',
+      'cache-control': 'public, max-age=10000',
+    })
+    res.end(JSON.stringify({ id: '1', name: 'Fake response' }))
+  })
+  apiBase = await new Promise<string>((resolve) => {
+    // we need always the same port so that the hash is the same
+    testServer.listen(port, () => resolve(`http://0.0.0.0:${port}`))
+  })
+})
+
+afterAll(async () => {
+  testServer.closeAllConnections()
+  await new Promise((resolve) => {
+    testServer.on('close', resolve)
+    testServer.close()
+  })
+})
+
+test<FixtureTestContext>('if the fetch call is cached correctly', async (ctx) => {
+  await createFixture('revalidate-fetch', ctx)
+  console.time('TimeUntilStale')
+  await runPlugin(ctx)
+
+  // replace the build time fetch cache with our mocked hash
+  const cacheKey = await getFetchCacheKey(new URL('/1', apiBase).href)
+  const originalKey =
+    'cache/fetch-cache/460ed46cd9a194efa197be9f2571e51b729a039d1cff9834297f416dce5ada29'
+  const fakeKey = `cache/fetch-cache/${cacheKey}`
+  const fetchEntry = await ctx.blobStore.get(originalKey, { type: 'json' })
+
+  await Promise.all([
+    // delete the page cache so that it falls back to the fetch call
+    ctx.blobStore.delete('server/app/posts/1'),
+    // delete the original key as we use the fake key only
+    ctx.blobStore.delete(originalKey),
+    ctx.blobStore.setJSON(fakeKey, fetchEntry),
+  ])
+
+  const blobEntries = await getBlobEntries(ctx)
+  expect(blobEntries.map((e) => e.key).sort()).toEqual(
+    [
+      fakeKey,
+      'cache/fetch-cache/ad74683e49684ff4fe3d01ba1bef627bc0e38b61fa6bd8244145fbaca87f3c49',
+      'server/app/_not-found',
+      'server/app/index',
+      'server/app/posts/2',
+    ].sort(),
+  )
+  const post1 = await invokeFunction(ctx, {
+    url: 'posts/1',
+    env: {
+      REVALIDATE_SECONDS: 10,
+      API_BASE: apiBase,
+    },
+  })
+  console.timeEnd('TimeUntilStale')
+
+  const post1Name = load(post1.body)('[data-testid="name"]').text()
+  // should still get the old value
+  expect(handlerCalled, 'should not call the API as the request should be cached').toBe(0)
+  expect(post1.statusCode).toBe(200)
+  expect(post1Name).toBe('Under the Dome')
+  expect(post1.headers, 'the page should be a miss').toEqual(
+    expect.objectContaining({
+      'x-nextjs-cache': 'MISS',
+    }),
+  )
+
+  await new Promise<void>((resolve) => setTimeout(resolve, 10_000))
+  // delete the generated page again to have a miss but go to the underlaying fetch call
+  await ctx.blobStore.delete('server/app/posts/1')
+  const post2 = await invokeFunction(ctx, {
+    url: 'posts/1',
+    env: {
+      REVALIDATE_SECONDS: 10,
+      API_BASE: apiBase,
+    },
+  })
+  const post2Name = load(post2.body)('[data-testid="name"]').text()
+  expect(post2.statusCode).toBe(200)
+  expect.soft(post2Name).toBe('Fake response')
+  expect(handlerCalled).toBe(1)
+})