data-fetching
Next.js data fetching - Server actions, caching, revalidation
When & Why to Use This Skill
This Claude skill provides expert-level guidance and implementation for Next.js data fetching patterns. It specializes in modern App Router features including Server Actions for secure mutations, advanced caching strategies for performance, and sophisticated revalidation logic to ensure data consistency in full-stack React applications.
Use Cases
- Implementing secure data mutations: Using 'use server' actions to handle form submissions and database updates with built-in security.
- Optimizing application performance: Configuring request memoization and time-based revalidation to reduce server load and improve response times.
- Enhancing User Experience: Utilizing streaming and parallel fetching patterns to enable progressive rendering and faster perceived performance.
- Granular Cache Control: Managing data freshness using specific caching options like 'force-cache' or 'no-store' based on real-time requirements.
| name | data-fetching |
|---|---|
| description | "Next.js data fetching - Server actions, caching, revalidation" |
| sasmp_version | "1.3.0" |
| bonded_agent | nextjs-expert |
| bond_type | PRIMARY_BOND |
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
// 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, cachedcache: 'no-store'- No cachingnext: { revalidate: N }- Revalidate after N seconds