Next.js te da un servidor en cada ruta, que es exactamente donde pertenece la imagen del vehículo. Resuelve el vehículo donde cargas la lista, entrega la URL a next/image y deja que ISR decida con qué frecuencia se ejecuta todo nuevamente.
No hay estado del cliente que gestionar y ningún efecto que escribir. El componente que recupera tu lista también resuelve sus imágenes, y el navegador recibe una marca finalizada con la URL ya en su lugar.
Cuatro pasos, uno de los cuales es un archivo de configuración que editas una vez y olvidas.
npm i vehicleimagery, coloque la clave en una variable de entorno y agregue nuestro host de imágenes a remotePatterns en next.config.
El mismo componente que carga la lista resuelve su vehículo y obtiene URLs para cada ángulo.
Pase la URL con ancho y alto explícitos. El optimizador maneja srcset, y las dimensiones fijas manejan el desplazamiento de diseño.
La imagen de vehículos cambia cuando tu catálogo lo hace, no por solicitud. Una ventana de revalidación medida en horas suele ser generosa.
Incorpore imágenes de vehículos a su producto sin complicaciones. Documentación clara, SDK abiertos y plugins listos que se conectan con su stack en minutos, y nuestra página de estado le muestra en vivo cómo va la API.
Nuestro CDN almacena la imagen en caché, y su caché de ISR mantiene el resultado de la resolución. Juntos, esto significa que una página de detalles de vehículo concurrida puede atender miles de visitas sin que una sola llamada salga de su servidor.
El error más común es tratar la imagen de vehículos como una preocupación del cliente en un marco que te da un servidor gratis. Un useEffect en un componente de tarjeta funciona en desarrollo y luego aparece en producción como credenciales expuestas, un Largest Contentful Paint más lento y una cuadrícula que se reordena mientras los datos llegan poco a poco.
Resolver durante el renderizado elimina los tres de una vez. La consulta de la lista y la búsqueda de la imagen ocurren en el mismo lugar, el resultado se almacena en caché por las mismas reglas de revalidación que el resto de la página, y next/image ve una URL remota normal. La integración termina siendo unas pocas líneas en un archivo que ya iba a escribir de todos modos.
Sí. Agrega nuestro host de imágenes a remotePatterns en next.config y el optimizador las trata como cualquier otra imagen remota.
Ambos. El rutador de aplicaciones es la mejor opción porque la resolución pertenece a un componente del servidor, pero una llamada a getServerSideProps o getStaticProps funciona de manera idéntica.
ISR, en casi todos los casos. La imagen del vehículo cambia con tu catálogo en lugar de por visitante, por lo que una ventana de revalidación de varias horas suele ser más que suficiente.
Sí. El SDK usa fetch y no tiene dependencias específicas de Node, así que los controladores de rutas de borde y los middleware funcionan sin un shim.
No. Puedes solicitar el ancho exacto que renderizas y saltarte next/image por completo. El optimizador es conveniente para srcset, no un requisito.
La respuesta te indica cuándo se utilizó un año modelo de respaldo, así que puedes decidir entre mostrarlo, mostrar un marcador de posición con marca o ocultar el espacio de la imagen.
Indíquenos qué rutas muestran vehículos y qué tamaños renderizan. Le devolvemos las URLs y la entrada de remotePatterns que necesita.
