skills.rest
sgcarstrends
sgcarstrendsOFFICIAL
Explore all skills by this author →
GitHub

cache-components

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

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps implement Next.js 16 Cache Components with use cache directives, Suspense, and cacheLife profiles to boost performance.

Core Features & Use Cases

  • use cache directives on data fetching functions.
  • Domain-level cache tags for efficient invalidation.
  • Suspense boundaries for streaming cached content.

Quick Start

Convert a data-fetching page to a cache-enabled component with a domain cache tag.

Frequently Asked Questions about cache-components

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

FAQPage Schema
How do I cache component renders in Next.js to improve page performance?▼

Use the `use cache` directive on data-fetching functions within components to cache their renders and results. Wrap components with Suspense boundaries to stream cached content, and configure cacheLife profiles to control cache duration and revalidation timing for optimal performance gains.

What's the best way to set up domain-level cache invalidation in Next.js?▼

Apply domain-level cache tags to group related cached data, then trigger invalidation through server actions that revalidate specific tag sets. This allows you to invalidate multiple cached renders and queries simultaneously without clearing the entire cache.

Do I need Suspense boundaries when implementing Next.js cache components?▼

Yes. Suspense boundaries are required to stream cached content and handle loading states. They define fallback UI while cached data loads, enabling progressive rendering and improving perceived performance alongside cacheLife configuration.

How do I convert an existing data-fetching page to use Next.js 16 cache components?▼

Add `use cache` directives to your data-fetching functions, wrap components in Suspense boundaries with fallback UI, assign domain-level cache tags for invalidation, and set cacheLife profiles to define cache duration and revalidation strategy.

Can I use cache components with query-level caching in Next.js?▼

Yes. Implement query-level caching by applying `use cache` directives at the fetch function level, combine with cacheLife for duration control, and use domain cache tags to manage invalidation across related queries and component renders.

Related Skills

Explore More Software Engineering Skills→
JaylaelikeJaylaelike

nextjs-app-router-patterns

Provide Next.js App Router patterns for Server Components, streaming, and parallel routes.

Community
Advanced
djankiesdjankies

using-cache-directive

Configure Next.js 16 output caching with the 'use cache' directive.

Community
Advanced
zinohomezinohome
1

react-server-components

Implement React Server Components patterns with Next.js App Router for data fetching and streaming.

Community
Advanced
armanzeroeightarmanzeroeight
29

ssr-ssg-advisor

Advise on Next.js rendering strategies for SSR, SSG, ISR, and CSR.

Community
Intermediate