Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Tô usando Next.js com SSR e TypeScript no projeto novo, e a dúvida é como fazer o lazy load de imagens sem complicar a renderização do lado servidor. No React puro, a gente usa o atributo loading com valor lazy, mas no Next.js parece que precisa de mais atenção pra mannter o desempenho sem perder a integridade do HTML gerado.
também acho que definir as alturas e larguras fixas ajuda a evitar reflow. e o lazy loading do Next funciona bem, mas tem que testar no mobile pra cuidar para que não pega pesado na rede.
uso o componente do Next/Image, mas sempre verifico se as dimensões estão bem definidas pra evitar layout shift. isso ajuda bastante na performance.
concordo, o mais importante é pensar na experiência do usuário sem sacrificar a performance. às vezes, dá pra combinar o lazy do Next com um fallback de placeholder.
no meu time, a gente usa o Next/Image e também ajusta o cache do CDN pra cuidar para que as imagens carreguem rápido. o lazy load por si só ajuda, mas o cache faz a diferença.