skills.rest
brandonarbini
brandonarbiniCOMMUNITY
Explore all skills by this author →
GitHub

next-caching

Implements 'use cache', cacheTag, and invalidation patterns for Next.js App Router applications.

Updated Jan 12, 2026
Search Tags:#suspense#caching#next.js#server actions#app router#cachetag#revalidatetag
One-click install
npx skills add https://github.com/brandonarbini/arbini.family --skill next-caching-brandonarbini
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: next-caching
Source: https://github.com/brandonarbini/arbini.family/tree/main/.agents/skills/next-caching
Command: npx skills add https://github.com/brandonarbini/arbini.family --skill next-caching-brandonarbini

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Next.js 16 Cache Components introduce new caching primitives ('use cache', cacheTag, cacheLife, updateTag) that are easy to misuse, causing stale dashboards, users not seeing their own writes, and build failures like "Uncached data was accessed outside of <Suspense>". This Skill provides the rules and patterns to wire caching and invalidation correctly. ## Core Features & Use Cases - Cache Directive Placement: Enforces putting 'use cache' with cacheTag() and cacheLife() inside data.ts query functions, keeping callers free of caching primitives. - Tag Constants & Invalidation: Defines exported tag builder constants and the correct invalidation API per context: updateTag() in Server Actions, revalidateTag(tag, 'max') or { expire: 0 } in webhooks and cron Route Handlers. - Suspense & loading.tsx Wiring: Ensures pages awaiting runtime data have a loading.tsx or Suspense boundary so next build does not fail with the blocking-route error. - Use Case: A webhook from an external system must invalidate cached discount data; the Skill shows the Route Handler importing the shared tag constant and calling revalidateTag with stale-while-revalidate semantics. ## Quick Start Review my Next.js app router code and fix the caching so users see their own writes after a mutation without breaking the build.

Frequently Asked Questions about next-caching

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I use 'use cache' with cacheTag in Next.js?▼

Place 'use cache' at the top of each query function in data.ts, then call cacheTag() with an exported tag constant and optionally cacheLife(). Function arguments automatically become the cache key, so callers never interact with caching primitives directly.

What is the difference between updateTag and revalidateTag in Next.js?▼

updateTag() provides read-your-own-writes invalidation and works only inside Server Actions. revalidateTag(tag, 'max') gives stale-while-revalidate semantics for webhooks, cron jobs, and Route Handlers, while revalidateTag(tag, { expire: 0 }) expires immediately.

Why does next build fail with 'Uncached data was accessed outside of <Suspense>'?▼

Under Cache Components, any page that awaits searchParams, reads cookies for auth, or awaits an uncached query accesses runtime data during render. Without a sibling loading.tsx or parent Suspense boundary, the build fails with this blocking-route error.

Can I call updateTag from a webhook or cron Route Handler?▼

No, updateTag() only works inside Server Actions. Webhooks, cron jobs, and other Route Handlers must import the shared tag constants and call revalidateTag(tag, 'max') for stale-while-revalidate or revalidateTag(tag, { expire: 0 }) for immediate expiration.

Does this caching pattern work with unstable_cache or older Next.js versions?▼

No, this pattern assumes Next.js 16+ with Cache Components enabled via cacheComponents: true in next.config.ts. Projects on the older model use unstable_cache, which this Skill does not cover, and React.cache() is only for per-render dedup of uncached reads.

Related Skills

Explore More Software Engineering Skills→
perimetreperimetre

caching

Implement Next.js App Router caching with the 'use cache' directive.

Official
Advanced
djankiesdjankies

using-cache-lifecycle-apis

Automate cache invalidation and policy management for Next.js 16 data.

Community
Intermediate
RomualdPRomualdP

Suspense & Streaming Generator

Wrap async React/Next.js server components in nested Suspense with skeleton fallbacks.

Community
Intermediate
openaiopenai
5.3k

next-cache-components

Implements Next.js 16 Cache Components with PPR, use cache directives, and tag-based invalidation.

Official
Intermediate