He creado un sitio web de React que inicialmente carga datos del servidor. Estos datos son necesarios para renderizar el sitio web. Durante la carga de datos, el sitio web muestra la siguiente pantalla de carga con un círculo giratorio.

Cuando pruebo el sitio web con PageSpeed Insights, aparece el error NO_FCP. Cuando agrego el texto "Cargando" debajo del círculo de carga giratorio, el error no aparece. PERO: PageSpeed no espera hasta que se obtengan los datos y se represente el contenido real. Supongo que asume que la pantalla de carga es el contenido real de la página. Solo valida la pantalla de carga. En las imágenes de representación en la línea de tiempo de Page Speed Insights, se puede ver que solo está la pantalla de carga.

Este es un fragmento de App.js:

 useEffect(() => { apiService.post('/api/init', {}).then((res) => { ... ... ... setInitialDataLoaded(true) }); }, []); if (initialDataLoaded) { return ( <Router> ... </Router> ); } return ( <div className="initial-app-load-container center"><Spinner /></div> );

Me temo que los robots de los motores de búsqueda obtendrán el mismo error y no indexarán la página. ¿Qué puedo hacer para que Lighthouse espere hasta que se represente el contenido real de la página? Ya he leído otros hilos sobre esto que recomiendan probarlo a través de las herramientas de desarrollo y en modo incógito, pero eso no resuelve el problema real.