skills.rest
motormetrics
motormetricsOFFICIAL
Explore all skills by this author →
Website𝕏@motormetricsGitHub

cache-components

Implement strategic caching in Next.js 16 data-fetching code with cacheLife and revalidateTag.

21|2|Updated Nov 5, 2023
Search Tags:#performance#next.js#cache#isr#cache-life#cache-tag
One-click install
npx skills add https://github.com/motormetrics/motormetrics --skill cache-components-motormetrics
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: cache-components
Source: https://github.com/motormetrics/motormetrics/tree/main/apps/web/.claude/skills/cache-components
Command: npx skills add https://github.com/motormetrics/motormetrics --skill cache-components-motormetrics

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Ensure 'use cache' is used strategically to minimize CPU usage and ISR writes. Use when creating/modifying queries to verify caching decisions align with data update patterns and cost optimization.

Core Features & Use Cases

  • Apply Next.js 16 Cache Components selectively to static or monthly-updated data to reduce CPU burden and cache regenerations.
  • Use domain-level cache tagging to minimize ISR writes and simplify cache invalidation.
  • Coordinate cacheLife with revalidateTag to align monthly data updates (e.g., COE results, car registrations) with cache lifecycles.

Quick Start

Apply a strategic cache by enabling 'use cache', setting cacheLife('max'), and tagging with a domain-level CACHE_TAG on a target query.

Frequently Asked Questions about cache-components

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

FAQPage Schema
How do I reduce ISR writes and CPU usage in Next.js 16 data fetching?▼

To reduce ISR writes and CPU usage in Next.js 16, apply 'use cache' selectively to static or monthly-updated data. Configure cacheLife('max') and apply domain-level cache tags to minimize unnecessary cache regenerations across shared components and API routes.

What is the best way to invalidate Next.js cache for monthly-updated data like car registrations?▼

The best way to invalidate Next.js cache for monthly data updates is using revalidateTag with a domain-level CACHE_TAG. This purges only targeted cache entries when data changes, aligning cache lifecycles with actual update patterns.

How do I configure cacheLife and cache tags in Next.js API routes?▼

To configure cacheLife and cache tags in Next.js API routes, import cacheLife and revalidateTag from next/cache. Enable 'use cache', set cacheLife('max') for static data, and assign a domain-level CACHE_TAG to control invalidation precisely.

When should I use the 'use cache' directive in Next.js applications?▼

You should use the 'use cache' directive in Next.js when fetching static or infrequently updated data, such as monthly COE results or car registrations. Avoid applying it to highly dynamic data to prevent stale content and unnecessary CPU overhead.

Related Skills

Explore More Software Engineering Skills→
Asymmetric-alAsymmetric-al
417

next-cache-components

Configure Next.js 16 Cache Components for Partial Prerendering.

Official
Intermediate
HollowvynHollowvyn

incremental-static-rendering

Configure revalidate and fallback for incremental static regeneration in Next.js.

Official
Intermediate
rattamnoonrattamnoon

next-cache-components

Configure cache components and use directives for mixed content in Next.js 16.

Community
Intermediate
sgcarstrendssgcarstrends
21

cache-components

Implement Next.js 16 Cache Components with use cache directives and cacheLife profiles.

Official
Advanced