Next.js Caching Deep Dive

Generate comprehensive technical documentation about Next.js caching mechanisms based on the official Next.js caching documentation.

Purpose

This skill helps developers understand and document Next.js caching strategies including request memoization, data cache, full route cache, and client-side router cache. It's particularly useful for creating internal documentation, onboarding materials, or architecture decision records about Next.js caching behavior.

Instructions

When a user requests documentation about Next.js caching, follow these steps:

1. **Understand the scope**: Ask the user what aspect of Next.js caching they want to document:

- Complete overview of all caching mechanisms

- Specific mechanism (request memoization, data cache, full route cache, router cache)

- Configuration and opt-out strategies

- Interaction between different cache layers

- Migration guidance (e.g., Pages Router to App Router caching differences)

2. **Fetch the source material**: Use WebFetch to retrieve the latest Next.js caching documentation from `https://nextjs.org/docs/app/building-your-application/caching`

3. **Structure the documentation** with these sections:

- **Overview**: High-level explanation of Next.js caching philosophy and the four main mechanisms

- **Rendering Strategies**: Explain static vs dynamic rendering and their impact on caching

- **Request Memoization**: How React memoizes fetch requests within a single render pass

- **Data Cache**: Server-side persistent caching of fetch responses across requests

- **Full Route Cache**: Caching of rendered HTML and RSC payload at build time

- **Router Cache**: Client-side caching of RSC payload for previously visited routes

- **Cache Interactions**: How different cache layers affect each other

- **Configuration APIs**: APIs for controlling cache behavior (fetch options, revalidatePath, revalidateTag, etc.)

- **Opting Out**: How to disable caching for specific routes or data requests

4. **Include code examples** for each mechanism:

- Show both TypeScript and JavaScript examples where applicable

- Include examples of opting in and opting out of caching

- Demonstrate cache revalidation (time-based and on-demand)

- Show Segment Config Options for route-level cache control

- Include examples of Dynamic APIs that opt routes out of static rendering

5. **Create comparison tables** to clarify:

- Differences between the four caching mechanisms (what, where, duration, purpose)

- Static vs Dynamic rendering characteristics

- Cache revalidation strategies (time-based vs on-demand)

- APIs that trigger dynamic rendering

6. **Add practical guidance**:

- Common patterns for cache invalidation

- Performance implications of different caching strategies

- Best practices for balancing static and dynamic content

- Debugging tips for cache-related issues

- Migration considerations from Pages Router or other frameworks

7. **Include visual diagrams** (as ASCII art or descriptions) showing:

- Request flow through different cache layers

- How caching behavior differs between static and dynamic routes

- Cache invalidation cascades

8. **Format the output** as:

- Markdown documentation ready to commit to a repository

- Include a table of contents for easy navigation

- Add "Good to know" callout boxes for important gotchas

- Link to relevant Next.js API references

Example Usage

**User**: "Document Next.js caching mechanisms for our team's internal wiki"

**Expected Output**: Complete markdown documentation covering all four caching mechanisms with code examples, configuration options, and best practices.

**User**: "Explain how to opt out of the Data Cache for specific fetch requests"

**Expected Output**: Focused documentation on Data Cache opt-out strategies with examples using `fetch` options like `cache: 'no-store'` and `next.revalidate: 0`.

**User**: "Show the difference between revalidatePath and revalidateTag"

**Expected Output**: Comparison documentation with code examples demonstrating when to use each API and their different use cases.

Constraints

Output Format

Generate documentation in markdown format with proper heading hierarchy, code blocks with syntax highlighting, and clear section breaks. Include a YAML frontmatter header if the target is a documentation site that uses it.