void-cache-component-pattern

Guides correct use of Next.js 16 Cache Components directives and revalidation strategies.

Updated May 29, 2026
One-click install
npx skills add https://github.com/voidcorp-core/void-harness --skill void-cache-component-pattern-voidcorp-core
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: void-cache-component-pattern
Source: https://github.com/voidcorp-core/void-harness/tree/main/packages/cli/core-assets/packs/pack-nextjs/skills/void-cache-component-pattern
Command: npx skills add https://github.com/voidcorp-core/void-harness --skill void-cache-component-pattern-voidcorp-core

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Next.js 16 flips the caching model to cached-by-default, and developers used to Next 13/14 easily make mistakes: accidentally caching user-specific data (a security leak), blanket-opting-out entire layouts (killing performance), or misusing revalidation. This Skill codifies the correct decision process for every Server Component, route handler, and fetch. ## Core Features & Use Cases - Opt-in/opt-out decisions: Explains when to leave the default cache in place versus adding 'use no cache' for user-dependent, real-time, or non-deterministic content. - Cache key strategy: Shows how route params, search params, cookies, and headers derive cache keys, and why user/org scoping must live in the URL. - Revalidation patterns: Covers time-based revalidate, tag-based revalidateTag, and path-based revalidatePath, with guidance on which to prefer. - Use Case: While building a dashboard page that mixes cached post data with a live viewer count, the Skill directs you to keep the page cached and opt out only the single dynamic fetch with { cache: 'no-store' }. ## Quick Start Ask the agent to review your Next.js 16 Server Component and confirm whether it should be cached, opted out with 'use no cache', or given a revalidation strategy.

Frequently Asked Questions about void-cache-component-pattern

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

FAQPage Schema
How do I opt out of caching in Next.js 16 Server Components?

Add the 'use no cache' directive at the top of the component file. Use it whenever the response depends on the current user, cookies, headers, live data, or non-deterministic inputs like Date.now().

When should I use revalidateTag vs revalidatePath in Next.js?

Default to revalidateTag when multiple pages share the same data, since it invalidates every fetch carrying that tag. Use revalidatePath only for a single specific page, as path-based invalidation is fragile with parameterized routes.

Can I cache part of a Next.js page while keeping one fetch dynamic?

Yes. Leave the component cached and pass { cache: 'no-store' } to the individual fetch that needs fresh data. The rest of the page continues to serve from cache.

Why is caching user-specific data dangerous in Next.js 16?

If a component reading getCurrentUser() is cached under a route-only key, one user could be served another user's data. Always add 'use no cache' explicitly when the response depends on the user, even if Next would detect it automatically.

How do I check if a Next.js page is actually cached?

Add a server-side console.log(Date.now()) inside the Server Component and refresh the page. If the timestamp stays stable across refreshes the page is cached; if it changes on every request, it is not.