0Pricing
React Academy · Lección

fetch() con opciones de caché en Next.js

Utilice las opciones force-cache, no-store y revalidate en fetch para controlar el comportamiento de la caché.

fetch() con opciones de caché en Next.js es una lección gratuita de React Academy en CoddyKit. Esta es la lección 1 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de React Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de React Academy incluye 4 lecciones en total.

fetch ampliado en Next.js

Next.js amplía la API nativa fetch() con una opción next para controlar la caché y la revalidación. Esto solo funciona en componentes de servidor y controladores de rutas.

force-cache (predeterminado)

De forma predeterminada, fetch() en Next.js utiliza force-cache: almacena la respuesta indefinidamente y la reutiliza para todas las solicitudes hasta que se revalida explícitamente.

// Cached forever (build-time static)
const res = await fetch('https://api.example.com/config', {
  cache: 'force-cache',
});
const config = await res.json();

no-store — Siempre actualizado

no-store desactiva completamente la caché. Cada solicitud llega al origen. Úselo para datos personalizados o sensibles.

// Never cached — fresh on every request
const res = await fetch('https://api.example.com/user/me', {
  cache: 'no-store',
});
const user = await res.json();

revalidate — ISR basado en tiempo

La opción next.revalidate almacena la respuesta en caché, pero la revalida cada N segundos en segundo plano, siguiendo el patrón stale-while-revalidate.

// Revalidate every 60 seconds
const res = await fetch('https://api.example.com/products', {
  next: { revalidate: 60 },
});
const products = await res.json();

revalidate a nivel de segmento

Exporte una constante revalidate desde una página o un layout para aplicar un intervalo de revalidación a todas las llamadas a fetch de ese segmento.

// app/products/page.tsx
export const revalidate = 60; // all fetches in this page revalidate every 60s

export default async function ProductsPage() {
  const products = await fetch('https://api.example.com/products').then(r => r.json());
  return <ProductList products={products} />;
}

next.tags — Revalidación basada en etiquetas

Asigne etiquetas a una llamada a fetch con next.tags. Utilice revalidateTag(tag) en una Server Action o un controlador de rutas para invalidar bajo demanda todas las cachés etiquetadas.

const res = await fetch('https://api.example.com/posts', {
  next: { tags: ['posts'] },
});

// In a Server Action or route handler:
import { revalidateTag } from 'next/cache';
revalidateTag('posts'); // invalidates all fetches tagged 'posts'

revalidatePath

revalidatePath(path) invalida la caché de una ruta URL específica, lo que hace que se regenere en la siguiente solicitud.

import { revalidatePath } from 'next/cache';

// After creating a new post:
revalidatePath('/blog'); // purge /blog page cache
revalidatePath('/blog/[slug]', 'page'); // purge all /blog/[slug] pages

Exclusión mediante funciones dinámicas

Al llamar a cookies(), headers() o leer searchParams en una página, esta se vuelve dinámica y deja de usar la caché por completo.

import { cookies } from 'next/headers';

export default async function ProfilePage() {
  const token = cookies().get('token');
  // This page is now dynamic — not cached
  const user = await getUser(token?.value);
  return <Profile user={user} />;
}

Deduplicación

Next.js deduplica las llamadas a fetch idénticas dentro de una misma pasada de renderizado: si dos componentes de servidor obtienen la misma URL, solo se realiza una solicitud HTTP.

Memoización de solicitudes frente a caché

Hay dos capas de caché: memoización de solicitudes (deduplicación por solicitud, automática) y la caché de datos (persistente y controlada por las opciones cache/revalidate).

Depurar el comportamiento de la caché

Ejecute next build y compruebe el resultado de la compilación: cada ruta muestra su estrategia de renderizado: Static (en caché), Dynamic (sin caché) o ISR (intervalo de revalidación).

Comprobación rápida

¿Qué opción de caché de fetch debe utilizar para datos que cambian rara vez, pero que deben actualizarse sin volver a desplegar toda la aplicación?

Resumen

Utilice cache: 'force-cache' para datos estáticos, cache: 'no-store' para datos siempre actualizados y next: { revalidate: N } para ISR. Etiquete las llamadas a fetch con next.tags y llame a revalidateTag() para invalidarlas bajo demanda. Las funciones dinámicas hacen que las páginas dejen de usar la caché automáticamente.

Preguntas frecuentes

¿La lección «fetch() con opciones de caché en Next.js» es gratis?

Sí — el texto completo de «fetch() con opciones de caché en Next.js» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de React Academy, actualiza a CoddyKit PRO. El curso de React Academy incluye 4 lecciones en total.

¿Qué aprenderé en «fetch() con opciones de caché en Next.js»?

Utilice las opciones force-cache, no-store y revalidate en fetch para controlar el comportamiento de la caché. Practicas React Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar React Academy?

No se requiere experiencia previa. React Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 1 de 4.

¿Cuánto tiempo toma la lección «fetch() con opciones de caché en Next.js»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de React Academy?

Sí. Cada lección de React Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

  1. fetch() con opciones de caché en Next.js
  2. unstable_cache y React cache()
  3. Regeneración estática incremental (ISR)
  4. Server Actions para mutaciones de datos
← Volver a React Academy