Next.js предоставляет вам сервер на каждом маршруте, — именно там и должно находиться изображение транспортного средства. Разрешите транспортное средство при загрузке списка, передайте URL в next/image, и пусть ISR решает, как часто это будет происходить снова.
Нет состояния клиента для управления и нет эффекта для написания. Компонент, который загружает ваш список, также разрешает его изображения, а браузер получает готовую разметку с уже установленным URL.
Четыре шага, один из которых — файл конфигурации, который вы редактируете один раз и забываете.
npm i vehicleimagery, поместите ключ в переменную окружения, и добавьте наш хост изображений в remotePatterns в next.config.
Тот же компонент, который загружает список, разрешает транспортное средство и получает URL-адреса для каждого угла.
Передайте URL с явной шириной и высотой. Оптимизатор обрабатывает srcset, а фиксированные размеры предотвращают сдвиг макета.
Изображения транспортных средств меняются, когда меняется ваш каталог, а не по каждому запросу. Окно перепроверки, измеряемое в часах, обычно щедрое.
Встройте изображения автомобилей в свой продукт без лишней работы. Понятная документация, открытые SDK и готовые плагины подключаются к вашему стеку за минуты, а страница состояния показывает вживую, как чувствует себя API.
Наш CDN кэширует изображение, а ваш кэш ISR сохраняет результат разрешения. Вместе они означают, что активная страница с деталями транспортного средства может обслужить тысячи посещений без единого вызова, покидающего ваш сервер.
Самая распространенная ошибка — это восприятие изображений транспортных средств как проблемы клиента в фреймворке, который предоставляет вам сервер бесплатно. useEffect в компоненте карточки работает в разработке, а затем в продакшене появляются открытые учетные данные, более медленное Largest Contentful Paint и сетка, которая перестраивается, пока данные поступают по каплям.
Разрешение во время рендеринга устраняет все три сразу. Запрос списка и поиск изображения происходят в одном и том же месте, результат кэшируется по тем же правилам перепроверки, что и остальная часть страницы, а next/image видит обычный удаленный URL. Интеграция сводится к нескольким строкам в файле, который вы все равно собирались писать.
Да. Добавьте наш хостинг изображений в remotePatterns в next.config, и оптимизатор будет обрабатывать их как любые другие удаленные изображения.
И то, и другое. Маршрутизатор приложения лучше подходит, так как разрешение принадлежит серверному компоненту, но вызов getServerSideProps или getStaticProps работает одинаково.
ISR, почти во всех случаях. Изображения транспортных средств меняются с вашим каталогом, а не для каждого посетителя, поэтому окно revalidate в несколько часов обычно более чем достаточно точно.
Да. SDK использует fetch и не имеет специфических зависимостей для Node, поэтому маршрутизаторы и промежуточное ПО на краю работают без шим.
Нет. Вы можете запросить точную ширину, которую отображаете, и полностью пропустить next/image. Оптимизатор удобен для srcset, но не является обязательным.
Ответ сообщает, когда использовался резервный год выпуска, поэтому вы можете выбрать между отображением его, отображением брендированного заполнителя или скрытием слота изображения.
Сообщите нам, какие маршруты отображают транспортные средства и какие размеры они рендерят. Мы вернемся с URL и записью remotePatterns, которая вам нужна.
