Next.js vous donne un serveur sur chaque route, ce qui est exactement là où les images de véhicules doivent être. Résolvez le véhicule lorsque vous chargez la liste, transmettez l'URL à next/image, et laissez ISR décider à quelle fréquence tout cela s'exécute à nouveau.
Il n'y a pas d'état client à gérer et aucun effet à écrire. Le composant qui récupère votre liste résout également ses images, et le navigateur reçoit une balise terminée avec l'URL déjà en place.
Quatre étapes, dont une consiste à modifier un fichier de configuration une seule fois et à l'oublier.
npm i vehicleimagery, placez la clé dans une variable d'environnement, et ajoutez notre hôte d'images à remotePatterns dans next.config.
Le même composant qui charge la liste résout son véhicule et obtient des URLs pour chaque angle.
Passez l'URL avec une largeur et une hauteur explicites. L'optimiseur gère srcset, et les dimensions fixes gèrent le décalage de mise en page.
L'imagerie des véhicules change lorsque votre catalogue change, pas à chaque demande. Une fenêtre de révalidation mesurée en heures est généralement généreuse.
Intégrez des images de véhicules à votre produit sans travail lourd. Une documentation claire, des SDK ouverts et des plugins prêts à l'emploi se connectent à votre stack en quelques minutes, et notre page d'état vous montre en direct comment se porte l'API.
Notre CDN met en cache l'image, et votre cache ISR conserve le résultat de la résolution. Ensemble, ils signifient qu'une page de détails de véhicule chargée peut servir des milliers de visites sans qu'un seul appel quitte votre serveur.
L'erreur la plus courante est de traiter l'imagerie des véhicules comme une préoccupation client dans un cadre qui vous offre un serveur gratuitement. Un useEffect dans un composant de carte fonctionne en développement, puis apparaît en production avec des identifiants exposés, un Largest Contentful Paint plus lent et une grille qui se reforme pendant que les données arrivent au compte-gouttes.
Résoudre pendant le rendu supprime les trois à la fois. La requête de liste et la recherche d'image se produisent au même endroit, le résultat est mis en cache par les mêmes règles de revalidation que le reste de la page, et next/image voit une URL distante normale. L'intégration se résume à quelques lignes dans un fichier que vous alliez écrire de toute façon.
Oui. Ajoutez notre hôte d'images à remotePatterns dans next.config et l'optimiseur les traite comme n'importe quelle autre image distante.
Les deux. Le routeur d'application est le meilleur choix car la résolution appartient à un composant serveur, mais un appel getServerSideProps ou getStaticProps fonctionne de manière identique.
ISR, dans presque tous les cas. Les images de véhicules changent avec votre catalogue plutôt que par visiteur, donc une fenêtre de revalidation de plusieurs heures est généralement plus que suffisamment précise.
Oui. Le SDK utilise fetch et n'a pas de dépendances spécifiques à Node, donc les gestionnaires de routes edge et les middleware fonctionnent sans shim.
Non. Vous pouvez demander la largeur exacte que vous rendez et sauter next/image entièrement. L'optimiseur est pratique pour srcset, pas une obligation.
La réponse vous indique quand une année modèle de secours a été utilisée, afin que vous puissiez choisir entre l'afficher, afficher un espace réservé personnalisé ou masquer l'emplacement de l'image.
Dites-nous quelles routes affichent des véhicules et quelles tailles ils rendent. Nous revenons avec les URLs et l'entrée remotePatterns dont vous avez besoin.
