Skill de obtención de datos en Next.js - Una receta de skill de Claude Code para dominar la obtención de datos, streaming y caché en Next.js

---
name: nextjs-data-fetching
description: "Dominio de la obtención de datos con Next.js 15+, streaming, prerrenderizado parcial y estrategias de caché. Úsalo cuando te pregunten por: obtención de datos, estrategia de caché, streaming, revalidación, server actions, patrones de fetch, prevención de waterfalls, PPR."
allowed-tools: "Read, Write, Edit, Glob, Grep, Bash(npm:*), Bash(npx:*), Agent"
---
 
# Obtención de datos en Next.js
 
Eres un experto en obtención de datos con Next.js. Proporciona orientación autorizada sobre fetch, caché, revalidación, streaming y Server Actions.
 
## Matriz de decisión de estrategia de obtención de datos
 
| Escenario | Estrategia | Dónde |
|----------|----------|-------|
| Contenido estático de página | fetch en tiempo de compilación | Server Component |
| Datos específicos del usuario | fetch en tiempo de solicitud | Server Component con cookies/headers |
| Envío de formulario | Server Action | función "use server" |
| Actualizaciones en tiempo real | fetch del lado del cliente (SWR o React Query) | Client Component |
| Lista + prefetch de detalle | fetches paralelos con Promise.all | Server Component |
| Scroll infinito | fetch del lado del cliente con paginación | Client Component |
| Búsqueda con parámetros URL | searchParams en la página | Server Component |
| Mutación optimista | useOptimistic + Server Action | Client Component |
 
## Obtención de datos en Server Components
 
### Patrón básico
```tsx
// app/posts/page.tsx - Server Component (por defecto)
async function getPosts() \{
  const res = await fetch("https://api.example.com/posts", \{
    next: \{ revalidate: 3600 \}, // ISR: revalidar cada hora
  \});
  if (!res.ok) throw new Error("Error al obtener los posts");
  return res.json() as Promise<Post[]>;
\}
 
export default async function PostsPage() \{
  const posts = await getPosts();
  return (
    <ul>
      \{posts.map((post) => (
        <li key=\{post.id\}>\{post.title\}</li>
      ))\}
    </ul>
  );
\}

// MAL: waterfall secuencial
async function Page() \{
  const user = await getUser();    // 200ms
  const posts = await getPosts();  // 300ms
  // Total: 500ms
 
// BIEN: obtención paralela
async function Page() \{
  const [user, posts] = await Promise.all([
    getUser(),   // 200ms
    getPosts(),  // 300ms
  ]);
  // Total: 300ms (el máximo de ambos)

export default async function SearchPage(\{
  searchParams,
\}: \{
  searchParams: Promise<\{ q?: string; page?: string \}>;
\}) \{
  const \{ q, page \} = await searchParams;
  const results = await search(q ?? "", Number(page ?? "1"));
  return <SearchResults results=\{results\} />;
\}

// Opt-in para caché
fetch(url, \{ cache: "force-cache" \});
 
// Caché con revalidación basada en tiempo
fetch(url, \{ next: \{ revalidate: 3600 \} \});
 
// Sin caché (por defecto en Next.js 15)
fetch(url, \{ cache: "no-store" \});
// o simplemente: fetch(url) - no-store es el valor por defecto

// Revalidación basada en tiempo
fetch(url, \{ next: \{ revalidate: 60 \} \});
 
// Revalidación bajo demanda por ruta
import \{ revalidatePath \} from "next/cache";
revalidatePath("/posts");
 
// Revalidación bajo demanda por tag
import \{ revalidateTag \} from "next/cache";
// Al hacer fetch:
fetch(url, \{ next: \{ tags: ["posts"] \} \});
// Al mutar:
revalidateTag("posts");

import \{ unstable_cache \} from "next/cache";
 
const getCachedUser = unstable_cache(
  async (id: string) => db.user.findUnique(\{ where: \{ id \} \}),
  ["user"],       // partes de la clave de caché
  \{ revalidate: 3600, tags: ["user"] \}
);

import \{ Suspense \} from "react";
 
export default function DashboardPage() \{
  return (
    <div>
      <h1>Panel</h1>
      \{/* Esto se renderiza inmediatamente */\}
      <StaticHeader />
 
      \{/* Estos se transmiten de forma independiente */\}
      <Suspense fallback=\{<ChartSkeleton />\}>
        <RevenueChart />
      </Suspense>
      <Suspense fallback=\{<TableSkeleton />\}>
        <RecentOrders />
      </Suspense>
    </div>
  );
\}
 
// Cada componente async se transmite cuando está listo
async function RevenueChart() \{
  const data = await getRevenue(); // consulta lenta
  return <Chart data=\{data\} />;
\}
 
async function RecentOrders() \{
  const orders = await getOrders(); // otra consulta lenta
  return <OrdersTable orders=\{orders\} />;
\}

// next.config.ts
const config = \{
  experimental: \{
    ppr: true,
  \},
\};
 
// app/product/[id]/page.tsx
import \{ Suspense \} from "react";
 
export default async function ProductPage(\{
  params,
\}: \{
  params: Promise<\{ id: string \}>;
\}) \{
  const \{ id \} = await params;
  const product = await getProduct(id); // estático (en caché)
 
  return (
    <div>
      \{/* Shell estático - prerrenderizado */\}
      <h1>\{product.name\}</h1>
      <p>\{product.description\}</p>
 
      \{/* Agujeros dinámicos - transmitidos en tiempo de solicitud */\}
      <Suspense fallback=\{<PriceSkeleton />\}>
        <DynamicPrice productId=\{id\} />
      </Suspense>
      <Suspense fallback=\{<ReviewsSkeleton />\}>
        <DynamicReviews productId=\{id\} />
      </Suspense>
    </div>
  );
\}

// actions.ts
"use server";
 
import \{ revalidatePath \} from "next/cache";
import \{ redirect \} from "next/navigation";
 
export async function createPost(formData: FormData) \{
  const title = formData.get("title") as string;
  const body = formData.get("body") as string;
 
  // Siempre valida en el servidor
  if (!title || title.length < 3) \{
    return \{ error: "El título debe tener al menos 3 caracteres" \};
  \}
 
  await db.post.create(\{ data: \{ title, body \} \});
  revalidatePath("/posts");
  redirect("/posts");
\}

// lib/data.ts
export function preloadUser(id: string) \{
  void getUser(id); // dispara el fetch, descarta la promesa (la memoización de solicitudes lo almacena en caché)
\}
 
// app/user/[id]/page.tsx
import \{ preloadUser \} from "@/lib/data";
 
export default async function UserPage(\{
  params,
\}: \{
  params: Promise<\{ id: string \}>;
\}) \{
  const \{ id \} = await params;
  preloadUser(id); // empieza a obtener datos inmediatamente
  // ... otro trabajo ...
  const user = await getUser(id); // usa la caché de memoización
  return <UserProfile user=\{user\} />;
\}

mkdir -p .claude/skills/nextjs-data-fetching
# Pega el contenido de la Receta en .claude/skills/nextjs-data-fetching/SKILL.md