¿Hay una opción en Javascript, React o Next JS para optimizar el rendimiento de carga cuando se usa el mismo recurso de video en diferentes componentes en diferentes páginas del sitio (para evitar recargar)? Algo así como mantener en Memoria los vídeos que se han cargado para no volver a cargarlos si cambia el diseño. Un caso de uso de ejemplo podría ser una vista de lista de ancho completo de varios videos en un componente y una vista general de cuadrícula en otro.

 const ComponentOne = () => { return ( <div className="container"> <video className="videoStyle01" autoPlay muted loop> // Using the same video src <source src="../videos/video_H264.mp4" type="video/mp4" /> </video> <div>Video title</div> </div> ); }; const ComponentTwo = () => { return ( <div className="container"> <div>Other Styling Elements and Description</div> <video className="videoStyle02" autoPlay muted loop> // Using the same video src <source src="../videos/video_H264.mp4" type="video/mp4" /> </video> </div> ); };