Nextjs Data Fetching

This covers the full spectrum of Next.js App Router data fetching, from server component patterns to client libraries like SWR and React Query. You get concrete examples for parallel vs sequential fetching, ISR with time-based revalidation, on-demand cache invalidation with tags, and server actions for mutations. The guidance on when to fetch server-side versus client-side is practical, and it doesn't shy away from the tricky parts like cache poisoning with user-specific data or hydration mismatches. The real value is in the opinionated best practices, like defaulting to server components and using Promise.all for independent requests. If you're building anything beyond a basic Next.js app, you'll reference the error boundary and loading state patterns regularly.

skills.sh installs: 3.9K
GitHub stars: 369
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add giuseppe-trisciuoglio/developer-kit --skill nextjs-data-fetching --agent claude-code

Installs into .claude/skills of the current project.

Files

Next.js Data Fetching

Overview

Provides patterns for data fetching in Next.js App Router: server-side fetching, SWR/React Query integration, ISR, revalidation, error boundaries, and loading states.

When to Use

Implementing data fetching in Next.js App Router
Choosing between Server Components and Client Components
Setting up SWR or React Query for client-side caching
Configuring ISR, time-based, or on-demand revalidation
Handling loading and error states
Building forms with Server Actions

Instructions

Server Component Fetching

Fetch directly in async Server Components:

async function getPosts() {
  const res = await fetch('https://api.example.com/posts');
  if (!res.ok) throw new Error('Failed to fetch posts');
  return res.json();
}

export default async function PostsPage() {
  const posts = await getPosts();
  return (
    <ul>
      {posts.map((post) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
}