He optado por alojar todas mis imágenes para un sitio en IPFS, están bien ancladas. Esto reduce el tráfico y los costos de mi proveedor de alojamiento dentro del nivel gratuito.
A veces, la URL de IPFS no se carga lo suficientemente rápido, ya que depende de dónde se encuentre el usuario, y las CDN que afirman almacenar en caché los resultados de IPFS no me han funcionado (no encuentran mi hash para almacenar en caché)
Así que quería una alternativa, quería permitir cierta latencia para cargar la imagen desde IPFS y luego volver a cargar la imagen directamente desde mi servidor.
No son solo imágenes, sino que básicamente parece que las etiquetas src de una variedad de recursos deben completarse condicionalmente. O tal vez un script de precarga podría intentar cargar los recursos y luego el tiempo de espera y cargarlos. No quiero estos recursos descargados de mi servidor a menos que sea absolutamente necesario, para esta aplicación y audiencia optimizar la velocidad de carga teórica del sitio no es tan importante. Idealmente puedo hacer todo esto en el código frontend. ¿Alguien ha cargado recursos de espejos, condicionalmente?
Puede verificar si la imagen no se ha cargado después de un tiempo. Hagamos un nuevo componente <ImageWithFallback>
const ImageWithFallback = ({src, fallbackSrc}) => { const [srcToUse, setSrcToUse] = useState(src) const imgLoadedOnInitSrc = useRef(false) useEffect(() => { const timer = setTimeout(() => { if (!imgLoadedOnInitSrc.current) setSrcToUse(fallbackSrc) }, 5000) return () => clearTimeout(timer) }, []) return <img src={srcToUse} onLoad={() => {imgLoadedOnInitSrc.current = true} /> }Sin embargo, no recomendaría esto. Lo que está tratando de hacer no se puede hacer de manera confiable en el cliente. Las personas con conexiones lentas, como los dispositivos móviles, pueden recurrir a su servidor o las personas que viven lejos. No puede saber si es el usuario final el que tiene una conexión lenta o el servidor. Por lo tanto, es posible que reciba más solicitudes de las que espera en su servidor.
Un enfoque más estable podría ser realizar una solicitud inicial tanto a su servidor como a IPFS y medir la latencia y, si la diferencia porcentual está por encima de un umbral, decidir el nombre de host base para todas las imágenes. Sin embargo... esto significa que esta verificación inicial también genera tráfico en su servidor; y para los usuarios con conexiones lentas, hacer esto en sí mismo ralentizará la carga de la página.
Realmente, necesita tener un CDN confiable que funcione.