BlogCache Components
Ultima actualización
- Crear una sola promesa en el padre con
db.getProduct(id)(sinawait) - Pasar esa promesa a cada componente de campo
- Envolver cada campo en su propio
<Suspense> - Deconstruir adentro de cada componente:
const { stock } = await productPromise
Ruta del demo
/product/[id]/shared-promise- Ejemplo directo:
/product/1/shared-promise
Implementación
export async function ProductContentSharedPromise({ params }) {
const { id } = await params;
const safeProductId = parseProductId(id);
// Una sola llamada / una sola promesa
const productPromise = db.getProduct(safeProductId);
return (
<>
<Suspense fallback={<ProductTextFromPromiseSkeleton />}>
<ProductTextFromPromise productPromise={productPromise} />
</Suspense>
<Suspense fallback={<ProductPriceFromPromiseSkeleton />}>
<ProductPriceFromPromise productPromise={productPromise} />
</Suspense>
<Suspense fallback={<ProductStockFromPromiseSkeleton />}>
<ProductStockFromPromise productPromise={productPromise} />
</Suspense>
</>
);
}Cada bloque consume la misma promesa:
export async function ProductStockFromPromise({ productPromise }) {
const { stock, lastChecked } = await productPromise;
return (
<div>
{stock} - {lastChecked}
</div>
);
}Qué ganas y qué pierdes
- ✅ Una sola query por request para el payload completo
- ✅ Menos duplicación de lógica de acceso a datos
- ✅ Granularidad visual: cada bloque mantiene su
Suspense - ✅ Útil cuando los campos cambian juntos o el registro es pequeño
- ⚠️ Si invalidas ese recurso, se recalcula todo el payload
- ⚠️ Pierdes invalidación fina por campo (texto/precio separado)
- ⚠️ El costo de query puede subir si solo necesitabas un campo
No hay una opción universalmente mejor. Este patrón prioriza simplicidad de acceso a datos + una sola query, mientras que el enfoque multi-query prioriza invalidación por campo.
Cuándo usar cada patrón
- Shared promise (
getProduct): cuando quieres una sola query y datos que suelen viajar juntos. - Multi-query granular: cuando texto/precio/stock tienen ciclos de vida distintos y necesitas tags por campo.
Cómo validarlo en la demo
- Abre
/product/1/shared-promise - Mira la consola del server
- Deberías ver
getProduct (all fields)una vez por request en esa ruta - Compara con
/product/1, donde verás queries separadas por campo