Next.js chargement de données Problème

Question

Je rencontre un problème avec Next.JS et récupère les accessoires initiaux sur mes pages. Je fais une application avec plusieurs (7-8) pages. Dans le menu de gauche, une fois qu'une icône est cliquée, le routeur pousse l'utilisateur sur la bonne page. Ensuite, si l'utilisateur est connecté, la page et les composants enfants sont chargés. Tout fonctionne, comme je suis en train de couvrir le temps de chargement avec un élément de chargement, quelque chose comme ceci:

render() { 

if (this.props.data !== undefined) { 
    return (<Provider store={store}><Main info={this.props.data} path={this.props.url.pathname} user={this.props.user} token={this.props.token} /></Provider>) 
} else { 
    return (<Loading />) 
}} 

L'objectif est conçu pour lancer la composante de chargement lorsque les données sont FETCH. Pas après. Je voulais le faire avec React crochets du cycle de vie, mais il semble que `

async getInitialProps statiques ({} req)

passe avant tout. Jetez un coup d'oeil sur le code entier

export default class Component extends React.Component { 

static async getInitialProps({req}) { 
const authProps = await getAuthProps(req, 
'url') 
return authProps; 
    } 

    componentDidMount() { 
if (this.props.data === undefined) { 
    Router.push('/login') 
} 
    } 

    render() { 

if (this.props.data !== undefined) { 
    return (<Provider store={store}><Main info={this.props.data} path={this.props.url.pathname} user={this.props.user} token={this.props.token} /></Provider>) 
} else { 
    return (<Loading />) 
}}} 

Answer 1

getInitalProps est d'être appelé lorsque le composant page est rendue. Vous ne devriez pas l'utiliser dans d'autres composants, car cela ne fonctionnera pas. Cela ne fait pas partie de React Lifecycle mais de l'implémentation de Next. Je crois que ce que vous voulez faire est d'aller chercher des données et de mesurer leur temps de chargement. Si c'est le cas, l'utilisation d'un componentDidMount peut suffire.