0
548
Vistasnextjs getServerSideProps muestra la carga
Estoy usando getServerSideProps en pages/post/index.js :
import React from "react"; import Layout from "../../components/Layout"; function Post({ post }) { console.log("in render", post); return ( <Layout title={post.name}> <pre>{JSON.stringify(post, undefined, 2)}</pre> </Layout> ); } export async function getServerSideProps({ query }) { return fetch( `${process.env.API_URL}/api/post?id=${query.id}` ) .then(result => result.json()) .then(post => ({ props: { post } })); } export default Post; Cuando cargo directamente /post/2 funciona como se esperaba, pero cuando voy de /posts a /post/2 haciendo clic en un enlace:
<Link as={`/post/${post.id}`} href={`/post?id=${post.id}`} > Parece que no pasa nada durante 2 segundos ( el retraso de la API ) y luego se muestra el contenido. Puedo ver en la pestaña de red que _next/data/development/post/9.json 9.json .
Me gustaría mostrar un indicador de carga cuando me muevo de una ruta a otra usando next/Link pero no puedo encontrar ninguna documentación en getServerSideProps que me permita hacer esto.
Cuando voy directamente a /post/:id , me gustaría que los datos se obtengan del lado del servidor y obtengan una página completamente procesada (funciona), pero cuando luego me muevo a otra ruta, los datos deben obtenerse del cliente (funciona). Sin embargo; Me gustaría tener un indicador de carga y que la interfaz de usuario no se congele durante la solicitud de datos.
3 Respuestas
Responde la pregunta0
Puedes usar nprogress en tu _app.js
import NProgress from 'nprogress'; import "nprogress/nprogress.css"; import Router from 'next/router'; NProgress.configure({ minimum: 0.3, easing: 'ease', speed: 800, showSpinner: false, }); Router.events.on('routeChangeStart', () => NProgress.start()); Router.events.on('routeChangeComplete', () => NProgress.done()); Router.events.on('routeChangeError', () => NProgress.done()); o importación dinámica a _app.js para reducir el tamaño del paquete
ProgessBar.js
import Router from 'next/router'; import NProgress from 'nprogress'; import "nprogress/nprogress.css"; NProgress.configure({ minimum: 0.3, easing: 'ease', speed: 500, showSpinner: false, }); Router.events.on('routeChangeStart', () => NProgress.start()); Router.events.on('routeChangeComplete', () => NProgress.done()); Router.events.on('routeChangeError', () => NProgress.done()); export default function () { return null; } _app.js
import dynamic from 'next/dynamic'; const ProgressBar = dynamic(() => import('components/atoms/ProgressBar'), { ssr: false }); const App = () => { ... return <> ... <ProgressBar /> </> }0
Aquí hay un ejemplo usando ganchos.
páginas/_app.js
import Router from "next/router"; export default function App({ Component, pageProps }) { const [loading, setLoading] = React.useState(false); React.useEffect(() => { const start = () => { console.log("start"); setLoading(true); }; const end = () => { console.log("findished"); setLoading(false); }; Router.events.on("routeChangeStart", start); Router.events.on("routeChangeComplete", end); Router.events.on("routeChangeError", end); return () => { Router.events.off("routeChangeStart", start); Router.events.off("routeChangeComplete", end); Router.events.off("routeChangeError", end); }; }, []); return ( <> {loading ? ( <h1>Loading...</h1> ) : ( <Component {...pageProps} /> )} </> ); }0
**Here is how I did it in NextJs with Material UI and nprogress** import '../styles/globals.css'; import { useEffect, useState } from 'react'; import Router from 'next/router'; import NProgress from 'nprogress'; import { useStyles } from '../src/utils'; import { CircularProgress } from '@material-ui/core'; NProgress.configure({ showSpinner: false }); function MyApp({ Component, pageProps }) { const classes = useStyles(); const [loading, setLoading] = useState(false); useEffect(() => { const jssStyles = document.querySelector('#jss-server-side'); if (jssStyles) jssStyles.parentElement.removeChild(jssStyles); const start = () => { console.log('start'); NProgress.start(); setLoading(true); }; const end = () => { console.log('findished'); NProgress.done(); setLoading(false); }; Router.events.on('routeChangeStart', start); Router.events.on('routeChangeComplete', end); Router.events.on('routeChangeError', end); return () => { Router.events.off('routeChangeStart', start); Router.events.off('routeChangeComplete', end); Router.events.off('routeChangeError', end); }; }, []); return ( <> {loading ? ( <div className={classes.centered}> <CircularProgress size={25} color='primary' /> </div> ) : ( <Component {...pageProps} /> )} </> ); } export default MyApp; Resultado: 