fix: Falling back to header if cache tags are not given from fetched …

…object (#557)


Co-authored-by: Dario Piotrowicz <[email protected]>

.changeset/empty-cups-pull.md

@@ -0,0 +1,5 @@
+---
+'@cloudflare/next-on-pages': patch
+---
+
+Falling back to header if cache tags are not given from fetched CachedFetchValue object. The change was introduced from Next.js 13.5+.

packages/next-on-pages/templates/_worker.js/utils/cache.ts

@@ -1,6 +1,9 @@
 import type { CacheAdaptor, IncrementalCacheValue } from '../../cache';
 import { SUSPENSE_CACHE_URL } from '../../cache';
 
+// https://github.com/vercel/next.js/blob/48a566bc/packages/next/src/server/lib/incremental-cache/fetch-cache.ts#L19
+const CACHE_TAGS_HEADER = 'x-vercel-cache-tags';
+
 /**
  * Handles an internal request to the suspense cache.
  *
@@ -50,6 +53,18 @@ export async function handleSuspenseCacheRequest(request: Request) {
 			case 'POST': {
 				// Update the value in the cache.
 				const body = await request.json<IncrementalCacheValue>();
+				// Falling back to the cache tags header for Next.js 13.5+
+				if (body.data.tags === undefined) {
+					body.tags ??=
+						request.headers
+							.get(CACHE_TAGS_HEADER)
+							?.split(',')
+							?.filter(Boolean) ?? [];
+				} else {
+					body.tags = body.data.tags;
+					delete body.data.tags;
+				}
+
 				await cache.set(cacheKey, body);
 
 				return new Response(null, { status: 200 });

packages/next-on-pages/templates/cache/adaptor.ts

@@ -54,7 +54,7 @@ export class CacheAdaptor {
 		switch (newEntry.value?.kind) {
 			case 'FETCH': {
 				// Update the tags with the cache key.
-				const tags = newEntry.value.data.tags ?? [];
+				const tags = newEntry.value.tags ?? [];
 				await this.setTags(tags, { cacheKey: key });
 
 				getDerivedTags(tags).forEach(tag => revalidatedTags.delete(tag));
@@ -87,7 +87,9 @@ export class CacheAdaptor {
 				await this.loadTagsManifest();
 
 				// Check if the cache entry is stale or fresh based on the tags.
-				const tags = getDerivedTags(data.value.data.tags ?? []);
+				const tags = getDerivedTags(
+					data.value.tags ?? data.value.data.tags ?? [],
+				);
 				const isStale = tags.some(tag => {
 					// If a revalidation has been triggered, the current entry is stale.
 					if (revalidatedTags.has(tag)) return true;
@@ -196,16 +198,20 @@ export type TagsManifest = {
 };
 export type TagsManifestItem = { keys: string[]; revalidatedAt?: number };
 
-// https://github.com/vercel/next.js/blob/fda1ecc/packages/next/src/server/response-cache/types.ts#L16
+// https://github.com/vercel/next.js/blob/df4c2aa8/packages/next/src/server/response-cache/types.ts#L24
 export type CachedFetchValue = {
 	kind: 'FETCH';
 	data: {
 		headers: { [k: string]: string };
 		body: string;
 		url: string;
 		status?: number;
+		// field used by older versions of Next.js (see: https://github.com/vercel/next.js/blob/fda1ecc/packages/next/src/server/response-cache/types.ts#L23)
 		tags?: string[];
 	};
+	// tags are only present with file-system-cache
+	// fetch cache stores tags outside of cache entry
+	tags?: string[];
 	revalidate: number;
 };