Back to Skills

data-fetching

verified

Next.js data fetching - Server actions, caching, revalidation

View on GitHub

Marketplace

pluginagentmarketplace-nextjs

pluginagentmarketplace/custom-plugin-nextjs

Plugin

custom-plugin-nextjs

Repository

pluginagentmarketplace/custom-plugin-nextjs
1stars

skills/data-fetching/SKILL.md

Last Verified

January 20, 2026

Install Skill

Select agents to install to:

Scope:
npx add-skill https://github.com/pluginagentmarketplace/custom-plugin-nextjs/blob/main/skills/data-fetching/SKILL.md -a claude-code --skill data-fetching

Installation paths:

Claude
.claude/skills/data-fetching/
Powered by add-skill CLI

Instructions

# Data Fetching Skill

## Overview

Modern data fetching in Next.js with server actions, caching strategies, and revalidation.

## Capabilities

- **Server Actions**: 'use server' for mutations
- **Caching**: Automatic request memoization
- **Revalidation**: Time-based and on-demand
- **Streaming**: Progressive rendering
- **Parallel Fetching**: Promise.all patterns

## Examples

```tsx
// Server Action
'use server'

export async function createPost(formData: FormData) {
  const title = formData.get('title')
  await db.posts.create({ title })
  revalidatePath('/posts')
}

// Data fetching with caching
async function getData() {
  const res = await fetch('https://api.example.com/data', {
    next: { revalidate: 3600 } // Revalidate every hour
  })
  return res.json()
}
```

## Caching Options

- `cache: 'force-cache'` - Default, cached
- `cache: 'no-store'` - No caching
- `next: { revalidate: N }` - Revalidate after N seconds

Validation Details

Front Matter
Required Fields
Valid Name Format
Valid Description
Has Sections
Allowed Tools
Instruction Length:
912 chars