O Next.js oferece um servidor em cada rota, que é exatamente onde a imagem do veículo pertence. Resolva o veículo onde você carrega a lista, passe a URL para next/image e deixe o ISR decidir com que frequência qualquer coisa disso é executada novamente.
Não há estado do cliente para gerenciar e nenhum efeito para escrever. O componente que busca sua lista também resolve suas imagens, e o navegador recebe a marcação finalizada com a URL já no lugar.
Quatro etapas, uma das quais é um arquivo de configuração que você edita uma vez e esquece.
npm i vehicleimagery, coloque a chave em uma variável de ambiente e adicione nosso host de imagem a remotePatterns em next.config.
O mesmo componente que carrega a lista resolve seu veículo e obtém URLs para cada ângulo.
Passe a URL com largura e altura explícitas. O otimizador cuida do srcset, e as dimensões fixas lidam com o deslocamento de layout.
A imagem de veículos muda quando seu catálogo muda, não por solicitação. Uma janela de revalidação medida em horas geralmente é generosa.
Traga imagens de veículos para o seu produto sem trabalho pesado. Documentação clara, SDKs abertos e plugins prontos se conectam ao seu stack em minutos, e a nossa página de estado mostra ao vivo como a API está.
Nosso CDN armazena a imagem em cache, e seu cache de ISR mantém o resultado da resolução. Juntos, eles significam que uma página de detalhes de veículo movimentada pode atender a milhares de visitas sem que uma única chamada saia do seu servidor.
O erro mais comum é tratar a imagem de veículos como uma preocupação do cliente em um framework que lhe oferece um servidor de graça. Um useEffect em um componente de cartão funciona no desenvolvimento e depois aparece na produção como credenciais expostas, um Largest Contentful Paint mais lento e uma grade que reflui enquanto os dados chegam aos poucos.
Resolver durante o render elimina os três de uma vez. A consulta de listagem e a busca de imagem acontecem no mesmo lugar, o resultado é armazenado em cache pelas mesmas regras de revalidação do resto da página, e o next/image vê uma URL remota normal. A integração acaba sendo um punhado de linhas em um arquivo que você ia escrever de qualquer maneira.
Sim. Adicione nosso host de imagens em remotePatterns no next.config e o otimizador as trata como qualquer outra imagem remota.
Ambos. O roteador de aplicativos é o melhor ajuste porque a resolução pertence a um componente de servidor, mas uma chamada de getServerSideProps ou getStaticProps funciona exatamente da mesma forma.
ISR, em quase todos os casos. A imagem do veículo muda com seu catálogo, não por visitante, então uma janela de revalidação de várias horas geralmente é mais do que suficiente.
Sim. O SDK usa fetch e não tem dependências específicas do Node, então os manipuladores de rotas de borda e os middlewares funcionam sem um shim.
Não. Você pode solicitar a largura exata que renderiza e pular o next/image completamente. O otimizador é conveniente para srcset, não uma exigência.
A resposta informa quando um ano modelo de fallback foi usado, para que você possa decidir entre mostrar, mostrar um placeholder com a marca ou ocultar o slot da imagem.
Informe-nos quais rotas mostram veículos e quais tamanhos eles renderizam. Voltamos com URLs e a entrada de remotePatterns de que você precisa.
