nextjs-cache-architecture
Structure caching from the start in Next.js 16+ App Router projects by building a tag registry, revalidation utilities, and data-fetching functions with "use cache" directives. This skill guides you through placing cache logic on data functions rather than pages, wiring mutations to invalidation, and organizing Suspense boundaries for partial prerendering. Includes templates for tags, revalidation handlers, and patterns for personalized content near cache boundaries.
nextjs-cache-architecture helps you design and implement caching in Next.js 16+ App Router projects using the "use cache" directive and tag-based invalidation.
AI-generated summary based on this skill's SKILL.md
Decision gist · record as of 2026-05-30
nextjs-cache-architecture helps you design and implement caching in Next.js 16+ App Router projects using the "use cache" directive and tag-based invalidation. Structure caching from the start in Next.js 16+ App Router projects by building a tag registry, revalidation utilities, and data-fetching functions with "use cache" directives. This skill guides you through placing cache logic on data functions rather than pages, wiring mutations to invalidation, and organizing Suspense boundaries for partial prerendering. Includes templates for tags, revalidation handlers, and patterns for personalized content near cache boundaries.
Use it when
- nextjs-cache-architecture emphasizes wiring mutations directly to invalidation by setting up revalidation utilities that respond to data.
- nextjs-cache-architecture addresses this by teaching you to place cache boundaries strategically—personalized content should live outside.
Verify before relying
Read SKILL.md below before installing (11 files). Open directory: indexed for reading, not audited.
Install
mohamed-hossam1/nextjs-skills/nextjs-cache-architecture · repository language: JavaScript
Open directory. Skills are indexed for reading, not audited. Review a skill's body before installing it.
Frequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
How do I set up caching in Next.js App Router?
nextjs-cache-architecture teaches you to structure caching from the start by placing "use cache" directives on data-fetching functions rather than pages. Build a tag registry to organize cache keys, create revalidation utilities wired to mutations, and use Suspense boundaries for partial prerendering. The skill provides templates for tags, revalidation handlers, and patterns to keep cache logic centralized and maintainable across your App Router project.
What is the nextjs-cache-architecture skill's approach to cache invalidation?
nextjs-cache-architecture emphasizes wiring mutations directly to invalidation by setting up revalidation utilities that respond to data changes. Rather than manual cache busting, you define which tags each mutation affects, then use those tags to revalidate affected cached data. The skill includes setup patterns for cache tag registries and handlers so invalidation stays predictable and tied to your data model.
How do I handle personalized or user-specific content with cache boundaries?
nextjs-cache-architecture addresses this by teaching you to place cache boundaries strategically—personalized content should live outside cached functions or use user-specific cache tags. The skill shows patterns for wrapping user-dependent logic in Suspense boundaries and organizing data fetches so that shared, cacheable content stays separate from per-user variations, enabling partial prerendering without stale personalization.
How do I migrate from unstable_cache to the new use cache directive?
nextjs-cache-architecture covers migration by showing how the "use cache" directive replaces unstable_cache with a cleaner, directive-based approach. The skill walks through converting existing unstable_cache calls to "use cache" functions, updating tag strategies, and rewiring revalidation logic. This prepares your codebase for Next.js 16+ while preserving your cache architecture's intent.
How do I debug stale or incorrectly fresh cached data in Next.js?
nextjs-cache-architecture provides troubleshooting patterns for stale data by helping you trace cache tag assignments, verify revalidation is firing on mutations, and check Suspense boundary placement. The skill teaches you to log tag registries, inspect which mutations trigger which invalidations, and validate that cache keys derive correctly from your data model, making it easier to spot why cached content isn't refreshing as expected.
What caching strategy does nextjs-cache-architecture recommend for large projects?
nextjs-cache-architecture recommends building a centralized tag registry and revalidation utilities from the start, organizing cache logic on data functions rather than pages, and using Suspense boundaries for partial prerendering. For large projects, the skill emphasizes separating cacheable shared content from personalized content, wiring mutations to specific tags, and structuring your App Router so cache decisions stay consistent and auditable across teams.
SKILL.md
Rendered from the published skill. Quoted content, verbatim.
Next.js Cache Architecture
Architect caching in a Next.js 16+ App Router project from day one — not just
dropping "use cache" where it happens to fit, but structuring the tag
registry, revalidation utilities, Suspense boundaries, and mutation wiring so
the cache stays correct as the codebase grows.
How to use this skill
Apply every rule and template below to the user's actual project. Replace
placeholders like [Entity] and [collection] with names from their
(truncated - see the full file via the links below)
File tree — 11 files
skills/nextjs-cache-architecture/SKILL.md
skills/nextjs-cache-architecture/assets/SuspenseOnSearchParams.tsx
skills/nextjs-cache-architecture/assets/revalidate.ts
skills/nextjs-cache-architecture/assets/tags.ts
skills/nextjs-cache-architecture/evals/evals.json
skills/nextjs-cache-architecture/overlay.yaml
skills/nextjs-cache-architecture/references/core-concepts.md
skills/nextjs-cache-architecture/references/debugging-and-checklist.md
skills/nextjs-cache-architecture/references/migration-from-unstable-cache.md
skills/nextjs-cache-architecture/references/personalized-content.md
skills/nextjs-cache-architecture/scripts/audit.mjs
Let your AI agent find skills like this
Example. Real query, live index.
You found this page by searching. An agent finds it by wishing: SkillFed indexes 56,283 agent skills by what they can do, searchable in plain language.
wish › “Design and implement caching architecture in Next.js App Router”
Give your agent the search over MCP, or paste the wish link into any chat. No install? Search from any chat →
Related skills
Next Cache Components enable Partial Prerendering in Next.js 16, letting you combine prerendered static content, cached async data, and fresh dynamic sections in a single route. The `use cache` directive marks functions for caching with configurable lifetimes via `cacheLife()`, while `cacheTag()` and `updateTag()` handle invalidation. Replaces the older `experimental.ppr` flag and `unstable_cache()` API.
Cache Components guides you through Next.js's compositional caching model, replacing segment-level configuration with granular, code-based cache control. Learn to apply the 'use cache' directive, manage cache lifetimes with cacheLife(), tag data for invalidation with cacheTag(), and architect static shells mixed with cached and dynamic content for optimal performance.
Cache Components guides you through Next.js's compositional caching model for Server Components, replacing segment-level configuration with granular, code-based control. Learn when to apply 'use cache', configure cache lifetimes and tags, invalidate stale data, and balance static shells with dynamic streaming content for optimal performance.
Master full-stack Next.js 16+ development with App Router, Server Components, and TypeScript. This skill covers routing patterns, data fetching with the `use cache` directive, Server Actions, ISR/SSR/SSG strategies, Turbopack optimization, and MCP devtools integration for modern React 19+ architectures.
This skill covers React Server Components patterns for Next.js 16+ applications, including App Router setup, component boundary design, and data fetching with the new cache components API. Learn Server Actions for mutations, streaming with Suspense, and React 19 patterns for building performant server-first apps. Includes migration guidance, best practices, and reference templates.
This skill covers 21 rules for implementing Partial Prerendering in Next.js 16 App Router, guiding you through enabling cacheComponents, placing Suspense boundaries, caching with 'use cache', handling runtime APIs, composing pages with parallel streaming, and building forms with mutations. Each rule corrects a specific misconception about the dynamic-by-default rendering model and shows the canonical approach for mixing static chrome with personalized or real-time content.
More skills nextjs-app-router (MIT)