Tengo un sitio web de NextJS y quiero agregar una pantalla de bienvenida antes de que se cargue el sitio web
pero debido a que la pantalla de bienvenida también está en el código de NextJS, se cargará cuando nextjs se procese en el servidor y JS se descargue y ejecute en el cliente. de hecho, es inútil porque se ejecutará después de que la página esté lista.
¿Cómo puedo hacer la pantalla de bienvenida antes de que reaccione completamente cargada y ejecutada?
También uso nginx para proxy_pass
usa este código
useEffect(() => { const handleStart = () => { setPageLoading(true); }; const handleComplete = () => { setPageLoading(false); }; router.events.on('routeChangeStart', handleStart); router.events.on('routeChangeComplete', handleComplete); router.events.on('routeChangeError', handleComplete); }, [router]);y usa pageLoding para mostrar splash
Para la pantalla de carga:
import React from 'react' import useSWR from 'swr' const fetcher = (url) => fetch(url).then((res) => res.json()); // your main function export default function Profile() { //for relative and absolute paths const { data, error } = useSWR('/api/user', fetcher) if (error) return <div>failed to load</div> //for the loading you can create your custom component and insert instead of div, like this you keep same styling if (!data) return <div>loading...</div> if (data) return <div>hello {data.name}!</div> }No use useEffect hook, use this lib , mejor código y funcionalidad.
Tienes multiples posibilidades
Puede iniciar su próxima aplicación en una página que contenga un brillo simple (pantalla de inicio), luego reemplace la URL por una URL que contenga SSR y finalmente elimine la página de carga para indexar con robot.txt. Puede leer más sobre estos consejos allí .
Puede insertar dentro de ... etiquetar un CSS para mostrar un cargador (su pantalla de inicio). Luego, cuando la función SSR esté cargando, el cargador se ocultará, pero cuando el navegador descargue index.html (primer archivo cargado, que contiene una etiqueta de estilo), el cargador se mostrará antes de que el navegador descargue otros activos (imágenes, js, etc.) y cargarlo. Puedes leer más sobre estos consejos allí .
Los primeros consejos mostrarán el cargador más rápido que el segundo, pero requerirán más pendiente (crear otra página, reemplazar la URL, eliminar la página del cargador para la indexación)