¿Qué capas de almacenamiento en caché tiene Next.js?

Question

Accepted Answer

El App Router tiene **múltiples capas de almacenamiento en caché** que funcionan juntas. Entenderlas explica por qué los datos a veces parecen obsoletos y cómo controlar su actualidad.

## Las cuatro cachés

```text
1. Request Memoization — dedupes identical fetch() calls within ONE render pass
2. Data Cache          — persists fetch() results across requests & deploys (server)
3. Full Route Cache    — caches the rendered HTML/RSC of static routes (build time)
4. Router Cache        — client-side cache of visited routes (in the browser, per session)
```

## 1. Request Memoization

```tsx
// the SAME fetch in a layout AND a page → only ONE network request per render
const user = await fetch("/api/user"); // automatically deduped
```

## 2. Data Cache (la que más ajustas)

```tsx
fetch(url, { cache: "force-cache" });       // cached (default) — like SSG
fetch(url, { cache: "no-store" });          // never cached — fresh every request
fetch(url, { next: { revalidate: 60 } });   // cached, refreshed every 60s — ISR
fetch(url, { next: { tags: ["posts"] } });  // taggable for on-demand invalidation
```

## 3 y 4. Cachés de ruta

**Full Route Cache** almacena rutas renderizadas estáticamente; **Router Cache** mantiene rutas visitadas anteriormente en el navegador para que la navegación hacia atrás/adelante y la renegociación sean instantáneas.

## Invalidar cachés en mutaciones

```tsx
import { revalidatePath, revalidateTag } from "next/cache";

revalidatePath("/blog");        // invalidate a specific route's cache
revalidateTag("posts");         // invalidate every fetch tagged "posts"
router.refresh();               // (client) clear the Router Cache for current route
```

Después de crear/actualizar datos (a menudo en una Server Action), llamas a `revalidatePath`/`revalidateTag` para que las páginas afectadas obtengan nuevamente los datos y los usuarios vean el cambio.

## La trampa común

```text
"Why is my data stale after an update?" → a cache (usually Data or Router cache)
is serving the old value. Fix: revalidateTag/revalidatePath after the mutation,
or use cache: "no-store" for always-fresh data.
```

(Nota: los valores por defecto de caché han cambiado en diferentes versiones de Next.js — comprueba tu versión, ya que algunas versiones recientes cachean menos agresivamente por defecto.)

## Por qué es importante

El almacenamiento en caché multicapa agresivo de Next.js es lo que lo hace rápido, pero también es la #1 fuente de confusión de "¿por qué mis datos están obsoletos?".

Conocer las cuatro capas, controlar la Data Cache por búsqueda (`no-store`/`revalidate`/tags) e invalidar con `revalidatePath`/`revalidateTag` después de mutaciones es esencial para obtener tanto rendimiento como actualidad correcta.