nextjs-data-cache-functions

Document Next.js 16 App Router data and cache functions.

Updated Mar 8, 2026
One-click install
npx skills add https://github.com/xabierlameiro/price-tracker --skill nextjs-data-cache-functions
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: nextjs-data-cache-functions
Source: https://github.com/xabierlameiro/price-tracker/tree/main/.agents/skills/nextjs-data-cache-functions
Command: npx skills add https://github.com/xabierlameiro/price-tracker --skill nextjs-data-cache-functions

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides a comprehensive reference for managing data fetching, caching strategies, and request/response manipulation within Next.js 16's App Router, enabling efficient and dynamic web applications.

Core Features & Use Cases

  • Data Fetching & Caching: Understand unstable_cache, 'use cache', cacheTag, and cacheLife for fine-grained control over data caching.
  • Cache Invalidation: Learn to use revalidatePath, revalidateTag, and updateTag to keep data fresh.
  • Request/Response Handling: Master cookies() and headers() for accessing request data, and after() for post-response actions.
  • Dynamic Rendering: Utilize connection() to opt-out of static rendering when necessary.
  • Use Case: When building a dashboard that displays frequently updated user data, use this Skill to implement effective caching and revalidation strategies to ensure users see the most current information without overwhelming the server.

Quick Start

Explain how to use revalidateTag with the 'max' profile in a Server Action.

Frequently Asked Questions about nextjs-data-cache-functions

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

FAQPage Schema
How do I invalidate cached data in Next.js App Router?

To invalidate cached data in Next.js, use revalidatePath to purge route caches or revalidateTag to target specific cache entries tagged with cacheTag, ensuring users see fresh data after updates.

What is the difference between unstable_cache and 'use cache' in Next.js 16?

In Next.js 16, 'use cache' is the modern directive for fine-grained data caching, while unstable_cache is the legacy function. Both allow control over caching behavior, but 'use cache' integrates with cacheTag and cacheLife profiles.

How to run background tasks after response in Next.js Server Actions?

To run background tasks after sending a response in Next.js, use the after() function within Server Actions. This allows you to execute post-response actions like logging or analytics without blocking the user's request completion.

When should I use connection() to opt-out of static rendering in Next.js?

Use connection() in Next.js when you need to opt-out of static rendering and force dynamic rendering. This is necessary when a component relies on dynamic request data like cookies() or headers() that cannot be statically optimized at build time.

Can I access request headers and cookies in Next.js App Router components?

Yes, you can access request headers and cookies in Next.js App Router components using the synchronous headers() and cookies() functions. They allow reading and writing request-specific data directly within Server Components and Server Actions.