Estoy usando la API Unsplash de producción, obteniendo una foto aleatoria de mi colección. El primer render tarda entre 30 y 40 segundos en cargarse. La respuesta de la API es bastante rápida, pero tardó mucho tiempo en cargarse. Encontré otro tema similar, aquí en SO: Las imágenes enlazadas se vuelven increíblemente lentas con React y Webpack

Agrego ancho y alto a mi consulta pero aún así, sin suerte, sigue siendo muy lento al principio. ¿Alguien le pasó lo mismo y encontró una solución?

Ese es un ejemplo de punto final de API que llamo:

 https://api.unsplash.com/photo/random/?collection=MY_COLLECTION_ID&q=85&w=1080&h=800

Ese es el código para buscar:

 /** * Calculate width to fetch image, tuned for Unsplash cache performance. */ export function calculateWidth(screenWidth: number = 1920): number { // Consider a minimum resolution too screenWidth = Math.max(screenWidth, 1080); // Lower limit at 1080 screenWidth = Math.min(screenWidth, 3840); // Upper limit at 4K screenWidth = Math.ceil(screenWidth / 240) * 240; // Snap up to nearest 240px for improved caching return screenWidth; } export const fetchRandomPhoto = async function () { const url = `${process.env.UNSPLASH_API_URL}/photos/random/` const width = calculateWidth(window.innerWidth); const params = new URLSearchParams({ collections: `${process.env.UNSPLASH_COLLECTION_ID}`, q: '85', // range [0-100] w: `${width}`, h: '800' }) const headers = new Headers({ Authorization: `Client-ID ${process.env.UNSPLASH_API_KEY}`, }) let dailyPhoto = localStorage.getItem('dailyPhoto') const savedPhotoDate = localStorage.getItem('savedPhotoDate') if (!dailyPhoto) { try { const res = await fetch(`${url}?${params}`, { headers }) if (res.ok) { dailyPhoto = await res.json() localStorage.setItem('dailyPhoto', JSON.stringify(dailyPhoto)) return dailyPhoto } else { console.log('Error fetching unsplash photo') return FALLBACK_PHOTO } } catch (err) { console.log('Error fetching unsplash server', err) return FALLBACK_PHOTO } } else { return JSON.parse(dailyPhoto) } }