0Pricing
React Academy · Lección

unstable_cache y React cache()

Almacene en caché los resultados de funciones costosas por solicitud o entre solicitudes mediante las utilidades de caché de Next.js.

unstable_cache y React cache() es una lección gratuita de React Academy en CoddyKit. Esta es la lección 2 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.

Dos utilidades de caché

Next.js proporciona dos utilidades de caché complementarias: unstable_cache para la caché persistente entre solicitudes y cache() de React para la deduplicación por solicitud.

React cache() — Deduplicación por solicitud

cache(fn) de React memoriza el resultado de una función durante una única pasada de renderizado en el servidor. Dos componentes de servidor que llamen a la misma función almacenada en caché reciben el mismo resultado sin realizar una segunda llamada a la base de datos o a la API.

import { cache } from 'react';

export const getUser = cache(async (id: string) => {
  return db.user.findUnique({ where: { id } });
});

// Both components call getUser(id) — only one DB query fires per request
// component A: const user = await getUser('1');
// component B: const user = await getUser('1'); // uses cached result

unstable_cache — Caché persistente

unstable_cache(fn, keyParts, options) conserva el resultado entre solicitudes hasta que se vuelve a validar explícitamente. Considérelo como fetch({ next: { revalidate } }), pero para cualquier función asíncrona (consultas a bases de datos, llamadas a Redis, etc.).

import { unstable_cache } from 'next/cache';

const getProducts = unstable_cache(
  async () => db.products.findMany(),
  ['products-list'],      // cache key parts
  { revalidate: 60, tags: ['products'] } // options
);

// In a Server Component:
const products = await getProducts();

Partes de la clave de caché

El segundo argumento de unstable_cache es un array de cadenas que forman la clave de caché. Incluya todas las variables que afecten al resultado.

const getUserPosts = unstable_cache(
  async (userId: string) => db.posts.findMany({ where: { userId } }),
  ['user-posts'],         // base key
  { tags: [`user-${userId}-posts`] } // per-user tag
);

// Call with userId — Next.js appends the argument to the key:
const posts = await getUserPosts(userId);

Etiquetas para la revalidación bajo demanda

Añada etiquetas a las funciones almacenadas en caché e invalídelas con revalidateTag() cuando cambien los datos; por ejemplo, después de una mutación en una Server Action.

// Server Action
async function createProduct(data: FormData) {
  'use server';
  await db.products.create({ data: parseFormData(data) });
  revalidateTag('products'); // invalidates all cached functions tagged 'products'
  redirect('/products');
}

Revalidación basada en tiempo

Establezca revalidate: N en las opciones para volver a validar la caché después de N segundos, de forma similar a ISR para llamadas a fetch.

const getStats = unstable_cache(
  async () => computeHeavyStats(),
  ['dashboard-stats'],
  { revalidate: 300 } // recompute at most every 5 minutes
);

Combinación de cache() y unstable_cache

Use cache() dentro de unstable_cache para las funciones que se llaman desde varios lugares durante un mismo renderizado: deduplicación dentro de la solicitud y persistencia entre solicitudes.

// Deduplicate the DB call within a request:
export const getRawUser = cache(async (id: string) => db.user.findUnique({ where: { id } }));

// And cache the result persistently:
export const getUser = unstable_cache(getRawUser, ['user'], { revalidate: 60, tags: ['user'] });

Limitaciones de unstable_cache

unstable_cache está marcada como inestable porque la API podría cambiar antes de estabilizarse. Las funciones almacenadas en caché no pueden acceder a datos específicos de la solicitud, como cookies o encabezados.

React cache() para datos del layout

Envuelva las obtenciones de datos del layout con cache() para que tanto el layout como cualquier página anidada que llame a la misma función compartan el resultado durante un mismo renderizado.

// lib/data.ts
export const getCurrentUser = cache(async () => {
  const session = await getServerSession();
  return db.user.findUnique({ where: { id: session?.userId } });
});

// layout.tsx and page.tsx both call getCurrentUser() — one DB query

Cuándo usar cada una

cache(): deduplica llamadas idénticas durante un renderizado (la misma solicitud). unstable_cache: conserva los resultados entre varias solicitudes hasta que se vuelven a validar. Use fetch + next.revalidate al llamar a API HTTP externas.

Comprobación rápida

¿Cuál es la diferencia clave entre cache() de React y unstable_cache de Next.js?

Repaso

cache(fn) deduplica llamadas durante una pasada de renderizado; es ideal para datos compartidos entre el layout y la página. unstable_cache(fn, keys, { revalidate, tags }) conserva los resultados entre solicitudes con invalidación basada en tiempo o etiquetas; es ideal para consultas costosas a bases de datos.

Preguntas frecuentes

¿La lección «unstable_cache y React cache()» es gratis?

Sí — el texto completo de «unstable_cache y React cache()» 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 «unstable_cache y React cache()»?

Almacene en caché los resultados de funciones costosas por solicitud o entre solicitudes mediante las utilidades de caché de Next.js. 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 2 de 4.

¿Cuánto tiempo toma la lección «unstable_cache y React cache()»?

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