Cache Components

Demo interactivo de cómo cachear campos individuales de un registro con diferentes estrategias en Next.js 16, mejorando latencia percibida y reduciendo carga en infraestructura durante request time.

El Problema

Imagina que tienes un producto con 3 campos:

Texto (nombre + descripción): Rara vez cambia
Precio: Cambia ocasionalmente
Stock: Debe estar siempre actualizado

¿Cómo cacheas cada campo de forma independiente?

❌ Lo que NO funciona

// Intentar cachear selectivamente desde un solo objeto
async function ProductPage({ productId }) {
  // Una sola query trae todo
  const product = await db.query("SELECT * FROM products WHERE id = ?");

  // ¿Cómo cacheo solo el precio?
  // ¿Cómo NO cacheo el stock?
  return (
    <div>
      {product.name} - ${product.price} - Stock: {product.stock}
    </div>
  );
}

No funciona porque: Una vez que tienes el objeto completo, no puedes aplicar use cache selectivamente a campos individuales.

✅ La Solución

Cada campo es un componente async separado con su propia query y estrategia de cache.

export default function ProductPage({ params }) {
  return (
    <Suspense fallback={<PageSkeleton />}>
      <ProductContent params={params} />
    </Suspense>
  );
}

async function ProductContent({ params }) {
  const { id } = await params;

  return (
    <div>
      {/* CAMPO 1: Texto cacheado */}
      <ProductText productId={id} />

      {/* CAMPO 2: Precio cacheado */}
      <ProductPrice productId={id} />

      {/* CAMPO 3: Stock sin cache */}
      <Suspense fallback={<StockSkeleton />}>
        <ProductStock productId={id} />
      </Suspense>
    </div>
  );
}

Importante: El Suspense va en el padre, no dentro del componente async.

Arquitectura

ProductPage (sync - estático)
│
└─ <Suspense>
   └─ ProductContent (async - accede a params)
      ├─ ProductText (async + 'use cache')
      ├─ ProductPrice (async + 'use cache')
      └─ <Suspense>
         └─ ProductStock (async sin cache)

Comparación Visual

En build time, Next.js prerrenderiza la página: - ✅ ProductText ejecuta query → incluido en static shell - ✅ ProductPrice ejecuta query → incluido en static shell - ❌ ProductStock NO se ejecuta (requiere request context) Resultado: HTML con texto y precio ya renderizados

El Problema

❌ Lo que NO funciona

✅ La Solución

Arquitectura

Comparación Visual

Siguientes pasos

Implementación

Conceptos clave

Revalidación

Caso: Promise compartida

Beneficios y costes

En esta página