Saltar a contenido

ADR-0009 · Las tarjetas de producto no precargan la ficha

  • Estado: aceptado
  • Decisores: mvaliente
  • Fecha de la decisión: 2026-09-23

Contexto y problema

Las tarjetas de producto enlazan a la ficha con el <Link> de Next (LocalizedClientLink). En producción, <Link> precarga la ruta de destino en cuanto el enlace entra en pantalla. En modo desarrollo no lo hace, y por eso no se veía ni en local ni en dev-storefront.

En staging se vio que, al bajar por los productos relacionados, el navegador pedía al servidor la ficha de cada tarjeta. El servidor arma cada una consultando a Medusa: la ficha tiene force-dynamic y el layout principal pide cliente, carrito y opciones de envío en cada pedido. Las grillas que usan ese enlace tienen scroll infinito (los relacionados y la tienda), así que son decenas de pedidos por visitante, por fichas que casi nadie abre.

Además, la precarga no adelanta el producto. Para una ruta dinámica, Next precarga solo hasta el loading.js más cercano, y la ficha no tiene: al hacer clic se espera a Medusa igual.

Opciones consideradas

  1. prefetch={false} en el enlace de la tarjeta.
  2. Precargar solo al pasar el mouse, con el patrón hover-triggered prefetch de la documentación de Next.
  3. Dejar el comportamiento por defecto.

Decisión

prefetch={false} en la tarjeta de producto (src/modules/common/components/product-card).

Como la precarga no adelanta la ficha, las tres opciones abren el producto con casi la misma velocidad. La primera es la única que no genera ningún pedido, y es una línea. La precarga al pasar el mouse solo empezaría a valer si la ficha sumara un loading.tsx, porque recién ahí la precarga traería algo útil.

Consecuencias

Positivas

  • Las grillas con scroll infinito dejan de generar un pedido al servidor, y a Medusa, por cada tarjeta visible.
  • Un solo cambio cubre todas las grillas que usan la tarjeta con el enlace de Next.

Negativas / deuda asumida

  • Al hacer clic, la ficha se arma desde cero. Con la ficha actual la diferencia no se percibe; si un día se le agrega un loading.tsx, conviene revisar esta decisión.
  • Solo se puede verificar en un build de producción (staging): en desarrollo el prefetch no existe.
  • La home (ProductGrid) y las categorías (algolia-product-grid) no cambian: usan un enlace común (useSimpleLink), que nunca tuvo prefetch.