¿Cómo obtienes datos en el App Router?

Question

Accepted Answer

En el App Router, obtienes datos **directamente dentro de Server Components asincronos** utilizando la API `fetch` estándar — sin `getServerSideProps`, sin `useEffect`, sin capa de datos separada. Next.js extiende `fetch` con controles de almacenamiento en caché. ## El patrón básico ```tsx // app/posts/page.tsx — a Server Component export default async function Posts() { const res = await fetch("https://api.example.com/posts"); // runs on the server const posts = await res.json(); return

{p.title}

; } ``` Dado que el componente se ejecuta en el servidor, simplemente `await`eas tus datos y los usas — mucho más simple que el baile de `useEffect` + `useState` + estado de carga del lado del cliente. ## La estrategia de almacenamiento en caché se establece por-fetch Next.js aumenta `fetch` para que cada llamada elija su comportamiento de renderizado: ```tsx fetch(url, { cache: "force-cache" }); // SSG — cached (default for static) fetch(url, { cache: "no-store" }); // SSR — fresh every request fetch(url, { next: { revalidate: 60 } }); // ISR — revalidate every 60s fetch(url, { next: { tags: ["posts"] } }); // tag for on-demand revalidation ``` Este es el modelo unificado del App Router: en lugar de elegir una estrategia a nivel de página, controlas el almacenamiento en caché a nivel de obtención de datos. ## Obtención paralela para evitar cascadas ```tsx // ❌ sequential — each awaits the previous (slow waterfall) const user = await getUser(); const posts = await getPosts(); // ✅ parallel — both start at once const [user, posts] = await Promise.all([getUser(), getPosts()]); ``` Inicia solicitudes independientes juntas con `Promise.all` para que no se bloqueen mutuamente. ## Obtención en Client Components ```tsx "use client"; // for client-side data (e.g. after interaction), use a library like SWR or React Query const { data } = useSWR("/api/user", fetcher); ``` Los Server Components cubren la mayoría de las necesidades; usa SWR/React Query para datos del lado del cliente, interactivos o con revalidación frecuente. ## Deduplicación de solicitudes Next.js **deduplica** automáticamente llamadas `fetch` idénticas en una única representación — por lo que puedes obtener los mismos datos en un layout y una página sin una solicitud duplicada. ## Por qué es importante La obtención de datos asincronos directa en Server Components es una de las mayores simplificaciones del App Router — sin boilerplate, acceso seguro del lado del servidor, deduplicación automática y almacenamiento en caché por-fetch que también funciona como tu opción SSG/SSR/ISR. Saber paralelizar obtenciones independientes (evitando cascadas) es la práctica de rendimiento clave.