Data fetching: cuando cachear y cuando no

Data fetching: cuándo cachear y cuándo no

En el App Router obtienes datos directamente dentro de los Server Components con await fetch() o consultando tu base de datos. La gran decisión no es cómo traer los datos, sino cuánto tiempo reutilizarlos. Elegir bien entre datos estáticos, revalidados o siempre dinámicos define la velocidad y la frescura de tu app.

Las tres estrategias

Revalidación por tiempo (ISR)

Sirve para páginas de contenido que toleran unos minutos de retraso. La página se regenera en segundo plano cada N segundos:

// Revalida toda la página cada 60 segundos

export const revalidate = 60;



export default async function Blog() {

  const posts = await fetch("https://api.midominio.com/posts")

    .then((r) => r.json());

  return <PostList posts={posts} />;

}

Datos siempre frescos

Para datos por usuario (un dashboard, un carrito) que nunca deben cachearse:

// Opción 1: a nivel de página

export const dynamic = "force-dynamic";



// Opción 2: a nivel de petición concreta

const data = await fetch(url, { cache: "no-store" });

Revalidación bajo demanda

Cuando cambias datos (un nuevo post) y quieres refrescar una página cacheada al instante, usa revalidatePath o revalidateTag desde una Server Action.

Ejercicio práctico