NextJS：如何为生产构建添加屏幕加载？

Posted 2023-03-06

【中文标题】NextJS：如何为生产构建添加屏幕加载？

【英文标题】：NextJS: How to add screen loading for production build?

【发布时间】：2020-06-08 06:32:30

【问题描述】：

我想在下一个 js 项目中添加屏幕加载。我尝试使用next/router 中的路由器组件来做到这一点。

这是我在 next.js 项目中的 _app.js：

import CookiesProvider from 'react-cookie';
import App from 'next/app'
import React from 'react'
import Provider from 'react-redux'
import withRedux from 'next-redux-wrapper'
import withReduxSaga from 'next-redux-saga'
import createStore from '../src/redux/store'
import Router from "next/router";
import Loaded, Loading from "../src/util/Utils";

class MyApp extends App 

    static async getInitialProps(Component, ctx) 
        let pageProps = ;

        if (Component.getInitialProps) 
            pageProps = await Component.getInitialProps(ctx)
        

        return pageProps
    

    render() 
        Router.onRouteChangeStart = () => 
            Loading()
        ;

        Router.onRouteChangeComplete = () => 
            Loaded()
        ;

        Router.onRouteChangeError = () => 
            Loaded()
        ;

        const Component, pageProps, store = this.props;
        return (
            <CookiesProvider>
                <Provider store=store>
                    <Component ...pageProps />
                </Provider>
            </CookiesProvider>
        )
    


export default withRedux(createStore)(withReduxSaga(MyApp))

这是Loaded() 和Loading() 函数：

export const Loaded = () => 
    setTimeout(() => 
        let loading = 'has-loading';
        document.body.classList.remove(loading);
    , 100);
;

export const Loading = () => 
    let loading = 'has-loading';
    document.body.classList.add(loading);
;

代码在项目处于开发模式时运行良好。但是项目建好后，加载不会消失。

您知道此问题的解决方案还是建议其他解决方案？

【参考方案1】：

我将以下代码添加到包装器组件中，问题得到解决。

componentDidMount() 
    Loaded();


componentWillUnmount() 
    Loading();

【参考方案2】：

使用apollo client 和react hooks，您可以执行以下操作。

例子：

import  useQuery  from '@apollo/react-hooks';
import gql from 'graphql-tag';

import  withApollo  from '../lib/apollo';
import UserCard from '../components/UserCard';

export const USER_INFO_QUERY = gql`
  query getUser ($login: String!) 
    user(login: $login) 
      name
      bio
      avatarUrl
      url
    
  
`;

const Index = () => 
  const  query  = useRouter();
  const  login = 'default'  = query;
  const  loading, error, data  = useQuery(USER_INFO_QUERY, 
    variables:  login ,
  );

  if (loading) return 'Loading...';            // Loading component
  if (error) return `Error! $error.message`; // Error component

  const  user  = data;

  return (
    <UserCard
      float
      href=user.url
      headerImg="example.jpg"
      avatarImg=user.avatarUrl
      name=user.name
      bio=user.bio
    />
  );
;

export default withApollo( s-s-r: true )(Index);

更多信息在这里：https://github.com/zeit/next.js/tree/canary/examples/with-apollo