You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
When implementing a custom CacheHandler in Next.js and the set method is called for a full page cache (e.g., /index), the tags property within the ctx argument appears to be missing. This occurs even when fetch requests with the next: { tags: [...] } option are present within the page component's rendering tree.
This behavior is unexpected, as the documentation suggests that tags associated with fetch requests during the rendering process should be available to the cache handler for invalidation purposes. The absence of these tags in the ctx for full page caches prevents custom cache handlers from effectively leveraging tag-based revalidation strategies for entire pages.
While a minimal reproduction repository would be ideal, here's a general outline of how to observe this issue:
Implement a custom CacheHandler in your next.config.js file.
Within a page component (e.g., pages/index.js or app/page.js), make one or more fetch requests with the next: { tags: [...] } option. For example:
// app/page.tsx (or similar in app directory)asyncfunctiongetData(){constres=awaitfetch('/api/data',{cache: 'force-cache',next: {tags: ['my-data-tag','home-page']},});// ...}exportdefaultasyncfunctionHome(){constdata=awaitgetData();// ...return<div>{/* ... */}</div>;}
In your custom CacheHandler's set method, log or inspect the ctx argument when the key corresponds to a full page cache (e.g., the key might resemble the route path or a hash thereof).
// cache-handler.jsconstmyCacheHandler={asyncget(key,ctx){// ... your get logic},asyncset(key,value,ctx){console.log('Cache SET context for key:',key,ctx);// Observe the ctx object// ... your set logic},asyncrevalidateTag(tag,ctx){// ... your revalidateTag logic},};
Build and run your Next.js application in a production-like environment (using next build and next start).
Access the page (e.g., /). Observe the logs from your custom CacheHandler's set method. You will likely find that the tags property in the ctx is missing or undefined for the full page cache entry, even though the fetch request within the page had tags.
Current vs. Expected behavior
Expected Behavior:
The ctx argument in the set method of a custom CacheHandler for full page caches should include the tags associated with any fetch requests made with the next: { tags: [...] } option during the server-side rendering or Server Components rendering of that page. This would allow custom cache handlers to store and utilize these tags for future revalidation.
Current Behavior:
The tags property in the ctx argument of the set method is missing (or undefined) for full page cache entries, despite the presence of tagged fetch requests in the page component tree.
Provide environment information
Operating System:
Platform: darwin
Arch: arm64
Version: Darwin Kernel Version 24.4.0: Fri Apr 11 18:33:47 PDT 2025; root:xnu-11417.101.15~117/RELEASE_ARM64_T6030
Available memory (MB): 36864
Available CPU cores: 12
Binaries:
Node: 22.15.0
npm: 10.9.2
Yarn: N/A
pnpm: 9.15.2
Relevant Packages:
next: 15.4.0-canary.23 // Latest available version is detected (15.4.0-canary.23).
eslint-config-next: 15.3.0
react: 19.1.0
react-dom: 19.1.0
typescript: 5.7.3
Next.js Config:
output: N/A
Which area(s) are affected? (Select all that apply)
Not sure
Which stage(s) are affected? (Select all that apply)
next start (local)
Additional context
Operating System:
Platform: darwin
Arch: arm64
Version: Darwin Kernel Version 24.4.0: Fri Apr 11 18:33:47 PDT 2025; root:xnu-11417.101.15~117/RELEASE_ARM64_T6030
Available memory (MB): 36864
Available CPU cores: 12
Binaries:
Node: 22.15.0
npm: 10.9.2
Yarn: 1.22.22
pnpm: N/A
Relevant Packages:
next: 15.4.0-canary.23 // Latest available version is detected (15.4.0-canary.23).
eslint-config-next: 15.3.1
react: 19.1.0
react-dom: 19.1.0
typescript: 5.8.3
Next.js Config:
output: N/A
The text was updated successfully, but these errors were encountered:
Link to the code that reproduces this issue
https://github.com/1b0t/nextjs-custom-cache-handler-bug
To Reproduce
When implementing a custom
CacheHandler
in Next.js and theset
method is called for a full page cache (e.g.,/index
), thetags
property within thectx
argument appears to be missing. This occurs even whenfetch
requests with thenext: { tags: [...] }
option are present within the page component's rendering tree.This behavior is unexpected, as the documentation suggests that tags associated with
fetch
requests during the rendering process should be available to the cache handler for invalidation purposes. The absence of these tags in thectx
for full page caches prevents custom cache handlers from effectively leveraging tag-based revalidation strategies for entire pages.While a minimal reproduction repository would be ideal, here's a general outline of how to observe this issue:
Implement a custom
CacheHandler
in yournext.config.js
file.Within a page component (e.g.,
pages/index.js
orapp/page.js
), make one or morefetch
requests with thenext: { tags: [...] }
option. For example:In your custom
CacheHandler
'sset
method, log or inspect thectx
argument when the key corresponds to a full page cache (e.g., the key might resemble the route path or a hash thereof).Build and run your Next.js application in a production-like environment (using
next build
andnext start
).Access the page (e.g.,
/
). Observe the logs from your customCacheHandler
'sset
method. You will likely find that thetags
property in thectx
is missing or undefined for the full page cache entry, even though thefetch
request within the page had tags.Current vs. Expected behavior
Expected Behavior:
The
ctx
argument in theset
method of a customCacheHandler
for full page caches should include thetags
associated with anyfetch
requests made with thenext: { tags: [...] }
option during the server-side rendering or Server Components rendering of that page. This would allow custom cache handlers to store and utilize these tags for future revalidation.Current Behavior:
The
tags
property in thectx
argument of theset
method is missing (or undefined) for full page cache entries, despite the presence of taggedfetch
requests in the page component tree.Provide environment information
Operating System: Platform: darwin Arch: arm64 Version: Darwin Kernel Version 24.4.0: Fri Apr 11 18:33:47 PDT 2025; root:xnu-11417.101.15~117/RELEASE_ARM64_T6030 Available memory (MB): 36864 Available CPU cores: 12 Binaries: Node: 22.15.0 npm: 10.9.2 Yarn: N/A pnpm: 9.15.2 Relevant Packages: next: 15.4.0-canary.23 // Latest available version is detected (15.4.0-canary.23). eslint-config-next: 15.3.0 react: 19.1.0 react-dom: 19.1.0 typescript: 5.7.3 Next.js Config: output: N/A
Which area(s) are affected? (Select all that apply)
Not sure
Which stage(s) are affected? (Select all that apply)
next start (local)
Additional context
Operating System:
Platform: darwin
Arch: arm64
Version: Darwin Kernel Version 24.4.0: Fri Apr 11 18:33:47 PDT 2025; root:xnu-11417.101.15~117/RELEASE_ARM64_T6030
Available memory (MB): 36864
Available CPU cores: 12
Binaries:
Node: 22.15.0
npm: 10.9.2
Yarn: 1.22.22
pnpm: N/A
Relevant Packages:
next: 15.4.0-canary.23 // Latest available version is detected (15.4.0-canary.23).
eslint-config-next: 15.3.1
react: 19.1.0
react-dom: 19.1.0
typescript: 5.8.3
Next.js Config:
output: N/A
The text was updated successfully, but these errors were encountered: